Write HTML code to draw an outlined rectangle using Canvas

YasminRadwan26

Save to bookmark

2022-05-14

593

Html programming,

All Answers

YasminRadwan26

2022-05-14

need an explanation for this answer? contact us directly to get an explanation for this answer

Solution

HTML5 provides strokeRect() method 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() method returns an object for working on canvas and strokeStyle property sets the color, gradient, or pattern used for strokes.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Write HTML code to draw an outlined rectangle using Canvas

All Answers

Solution

Syntax of strokeRect()

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now