w3resource

JavaScript: Draw a rectangular shape

JavaScript Drawing: Exercise-1 with Solution

Draw Rectangle

Write a JavaScript program to draw the following rectangular shape.

Sample output:

rectagular shape

Sample Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw a rectangular shape</title>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

JavaScript Code:

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');

    context.fillRect(20,20,100,100);
    context.clearRect(40,40,60,60);
    context.strokeRect(45,45,50,50);
  }
}

Live Demo:

See the Pen javascript-drawing-exercise-1 by w3resource (@w3resource) on CodePen.


For more Practice: Solve these Related Problems:

  • Write a JavaScript program to draw a rectangle with a vertical gradient fill that transitions from one color to another.
  • Write a JavaScript program to draw a rectangle with a dashed border and a solid fill color.
  • Write a JavaScript program to draw a rectangle with rounded corners and a shadow effect.
  • Write a JavaScript program to draw a rotating rectangle that continuously spins around its center.

Go to:


PREV : javascript Drawing Exercises Home.
Next: Draw Circle.

Improve this sample solution and post your code through Disqus.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.