How to draw a rectangle on HTML5 Canvas?

HTMLWeb DevelopmentFront End Technology

The HTML5 <canvas> tag is used to draw graphics, animations, etc. using scripting. It is a new tag introduced in HTML5. The canvas element has a DOM method called getContext, which obtains rendering context and its drawing functions. This function takes one parameter, the type of context 2d.

To draw a rectangle with HTML5 canvas, use the fillRect(x, y, width, height) method:

You can try to run the following code to learn how to draw a rectangle with HTML5 Canvas


Live Demo

<!DOCTYPE html>
      <title>HTML5 Canvas Tag</title>
      <canvas id="newCanvas" width="200" height="100" style="border:1px
         solid #000000;"></canvas>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#7cce2b';
Published on 07-Feb-2018 13:31:42