HTML

All you need to know about HTML

Canvas

HTML Canvas is an HTML element used for graphics to draw shapes. We can define canvas in HTML like any other element and then modify that or use that in JS

We have 2 different APIs in JS that allows us to draw on the canvas element

Canvas API - For 2D
WebGL API - For 3D

/*HTML*/
<body>
    <canvas id="canvas1"></canvas>
    <script src="index.js"></script>
</body>


/*index.js*/

const canvas = document.getElementById('canvas1') 

// for JS Intellisense use below line 
const canvas = /** @type {HTMLCanvasElement} */ (document.querySelector('#canvas1'))
 

// canvas API 2D
const ctx = canvas.getContext('2d')
// canvas API 3D
// const ctx = canvas.getContext('webgl')

console.log(ctx)

ctx.beginPath() // imagine, putting pencil on paper before drawing

PreviousReact Testing NextCSS 🐠

Last updated 3 years ago