Q:

Write HTML code to draw an outlined rectangle using Canvas

belongs to collection: HTML5 programming Exercises

YasminRadwan26
Save to bookmark
|
2022-05-15
|
  200 
0

Write HTML code to draw an outlined rectangle using Canvas

 

Html programming,
login and add your own answer to this question

All Answers

YasminRadwan26
2022-05-15
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)

HTML5 programming Exercises
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
Write HTML code to draw a rectangle using Canvas a... >>
<< Write HTML code to embed the following audio in a ...