HTML5 Canvas strokeRect() Exercise

Write HTML code to draw an outlined rectangle using Canvas.

Solution

HTML5 strokeRect() method is used to draw outlines rectangle using canvas. This is a method of HTML <canvas> element.

Syntax of strokeRect()

context.strokeRect(x,y,width,height);

Here, x and y are the x and y axis coordinates of the rectangle respectively, width and height are used to set the width and the height of rectangle.

This is the following HTML5 code to draw the outlined rectangle using canvas.

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function()
{
canvas = document.getElementById("canvasArea");
context = canvas.getContext("2d");
var xPos = 20; var yPos = 20;
var width = 100; var height = 50;
context.strokeStyle = "red";
context.strokeRect (xPos+130, yPos, width, height);
}
</script>
</head>
<body>
<div style = "width:400px; height:90px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea"
width = "400" height = "90" style = "border:2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas> 
</div>
</body>
</html>

Output of the above code

In the above code, getContext is a method that returns an object for working on canvas and strokeStyle property sets the color, gradient, or pattern used for strokes.

Next Exercise >>