Canvas

{"html":"\n\n\n \n \n \n Canvas\n \n\n\n

\n \n\n","css":"html{font-size:16px;box-sizing:border-box}*,:after,:before{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0;padding:0;font-weight:400}ol,ul{list-style:none}img{height:auto;max-width:100%}body{margin:0;overflow:hidden;background:#000}","js":"const canvas = document.getElementById('canvas');\nconst ctx = canvas.getContext('2d');\n\nlet WIDTH;\nlet HEIGHT;\n\nfunction init() {\n resetCanvasSize(true);\n\n // Reset canvas size when window is resized\n window.addEventListener('resize', function() {\n resetCanvasSize();\n });\n}\n\nfunction resetCanvasSize(initial = false) {\n function setSize() {\n WIDTH = window.innerWidth;\n HEIGHT = window.innerHeight;\n\n canvas.setAttribute('width', WIDTH);\n canvas.setAttribute('height', HEIGHT);\n\n canvas.style.width = WIDTH + 'px';\n canvas.style.height = HEIGHT + 'px';\n }\n\n if (initial) {\n // window.innerHeight can be incorrect at the beginning of the page\n // So we get the values on the second cycle of the event loop so that\n // accurate values will be received.\n // This is only necessary for the initialization of the canvas\n setTimeout(setSize);\n return;\n }\n\n setSize();\n}\n\nfunction run() {\n // Clear canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n // Fill canvas with black\n ctx.beginPath();\n ctx.rect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = '#000';\n ctx.fill();\n\n // Sample Text\n ctx.beginPath();\n ctx.rect(canvas.width / 2 - 200, canvas.height / 2 - 50, 400, 100);\n ctx.lineWidth = 2;\n ctx.strokeStyle = '#fff';\n ctx.stroke();\n\n ctx.beginPath();\n ctx.font = '16px Arial';\n ctx.fillStyle = '#fff';\n ctx.textAlign = \"center\";\n ctx.fillText('Open \"js/canvas.js\" in a text editor to get started.', canvas.width / 2, canvas.height / 2 + 8);\n\n // Add rendering code here\n\n // Redraw canvas\n window.requestAnimationFrame(run);\n}\n\ninit();\nrun();\n"}