How to draw rectangle using javascript.
Draw Rectangle using canvas
Today we will learn How to draw canvas rectangle using JavaScript. You can
set these properties on rectangles -:
set these properties on rectangles -:
1. X/Y position
2. Width
3. Height
4. Rotation
5. Fill color
6. Stroke color
7. Stroke width 8. Opacity
6. Stroke color
7. Stroke width 8. Opacity
Lets see the examples
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1000" height="1000" >
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
//For Browser
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
// Commented for node js
//const canvas = createCanvas(width, height);
//const context = canvas.getContext('2d');
var x = 30;
var y = 300;
var width = 300;
var height = 150;
var rotationAngle = 30;
var strokeWidth = 3;
var opacity = '0.7'; //from 0 to 1
context.beginPath();
<html>
<body>
<canvas id="myCanvas" width="1000" height="1000" >
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
//For Browser
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
// Commented for node js
//const canvas = createCanvas(width, height);
//const context = canvas.getContext('2d');
var x = 30;
var y = 300;
var width = 300;
var height = 150;
var rotationAngle = 30;
var strokeWidth = 3;
var opacity = '0.7'; //from 0 to 1
context.beginPath();
1. Let's Draw rectangle without rotation and stroke
context.fillStyle = 'red';
context.fillRect(10, 50, width, height);
2. Lets draw rectangle with Stroke
context.fillStyle = 'red';
context.fillRect(320, 50, width, height);
if(strokeWidth > 0) {
context.lineWidth = strokeWidth;
context.strokeStyle = "#38a832";
context.strokeRect(320, 50, width, height);
}
3. Lets Draw Rectangle with Rotation, stroke and color
To Apply rotation first of all we need to find out the Horizontal and Vertical Center point so that we
can translate and rotate the rectangle.
//To Apply rotation
if(rotationAngle > 0) {
var horizontalCenter = x+ (width / 2); // Horizontal Center
var verticalCenter = y+ (height / 2); // Vertical Center
context.translate(horizontalCenter, verticalCenter); //Translate
if(rotationAngle > 0) {
var horizontalCenter = x+ (width / 2); // Horizontal Center
var verticalCenter = y+ (height / 2); // Vertical Center
context.translate(horizontalCenter, verticalCenter); //Translate
/*Here rotation angle needs to be in Radians so converting degree into the radian. where rotationAngle
is the value of the angle in degree.*/
context.rotate(rotationAngle * 3.17 / 180); // Rotating the rectangle after converting the degree into radian.
context.translate(-horizontalCenter, -verticalCenter);
}
//fillStyle takes four parameters rgba(R, G, B, Opacity)
context.fillStyle = 'red';
context.fillRect(x, y, width, height);
//Check if Stroke width exist then apply the Stroke width using below properties.
if(strokeWidth > 0) {
context.lineWidth = strokeWidth;
context.strokeStyle = "#38a832";
context.strokeRect(x, y, width, height);
}
</script>
</body>
</html>
At the end you will be able to see the output something like this.
Please write in comment box if you need any further information on this, I will be very
Happy to share the information with you.
How to draw rectangle using javascript.
Reviewed by Dhaneshwar
on
9:22:00 PM
Rating:
Reviewed by Dhaneshwar
on
9:22:00 PM
Rating:
No comments: