HTML Canvas allows us to draw graphics (using JavaScript). We can create a canvas element and use a WebGL API to draw lines, fill rectangles etc.<\/p>\n
Let’s demonstrate some of the canvas and drawing functionality by creating a simple Tic-Tac-Toe UI. Start of by creating a HTML file and within that we add a canvas element, for example<\/p>\n
\r\n<canvas id="tic-tac-toe-board"><\/canvas>\r\n<\/pre>\nNow in our JavaScript (or in my case I’m going to use TypeScript) we can get the element using the id and then start interacting with the canvas using WebGL, for for example here’s a “main” method which we’d run in the HTML body’s onload event. The first thing we need to do is get the canvas element using <\/p>\n
\r\nconst board = <HTMLCanvasElement> document.getElementById('tic-tac-toe-board');\r\n<\/pre>\nNext up we need to get the element’s context using<\/p>\n
\r\nconst ctx = board.getContext('2d'); \r\nif(ctx != null) {\r\n}\r\n<\/pre>\nOnce we have the context we can use methods, such as fillRect, moveTo, lineTo etc. as well as set properties on the context, for example<\/p>\n
\r\nconst ctx = board.getContext('2d'); \r\nif(ctx != null) {\r\n ctx.fillStyle = 'white';\r\n ctx.fillRect(0, 0, board.clientWidth, board.clientHeight);\r\n}\r\n<\/pre>\nBelow is an example of an implementation of code to draw a Tic-Tac-Toe board and handle click events.<\/p>\n
\r\nfunction main() {\r\n const board = <HTMLCanvasElement> document.getElementById('tic-tac-toe-board');\r\n\r\n const size = 500;\r\n const lineColour = "#ddd";\r\n const lineStart = 4;\r\n const lineLength = size - 5;\r\n const sectionSize = size \/ 3;\r\n\r\n board.width = size;\r\n board.height = size;\r\n\r\n const elemLeft = board.offsetLeft + board.clientLeft;\r\n const elemTop = board.offsetTop + board.clientTop;\r\n const elemWidth = board.clientWidth;\r\n const elemHeight = board.clientHeight;\r\n\r\n \/\/ example of handling click event\r\n board.addEventListener('click', ev => {\r\n const x = ev.pageX - elemLeft;\r\n const y = ev.pageY - elemTop;\r\n\r\n console.log(`X: ${x}, Y: ${y}`);\r\n });\r\n\r\n const ctx = board.getContext('2d'); \r\n if(ctx != null) {\r\n ctx.fillStyle = 'white';\r\n ctx.fillRect(0, 0, elemWidth, elemHeight);\r\n\r\n ctx.lineWidth = 10;\r\n ctx.lineCap = 'round';\r\n ctx.strokeStyle = lineColour;\r\n ctx.beginPath();\r\n\r\n for (let y = 1; y <= 2; y++) { \r\n ctx.moveTo(lineStart, y * sectionSize);\r\n ctx.lineTo(lineLength, y * sectionSize);\r\n }\r\n \r\n for (let x = 1; x <= 2; x++) {\r\n ctx.moveTo(x * sectionSize, lineStart);\r\n ctx.lineTo(x * sectionSize, lineLength);\r\n }\r\n \r\n ctx.stroke();\r\n }\r\n}\r\n<\/pre>\n