How to draw Canvas Image, Line & Circle With HTML & JavaScript
Please see above image. Let’s create this with using CANVAS and it’s graphic design methods using JavaScript.
Canas is an HTML element that is used to draw or create shapes / graphics with JavaScript. We can create Lines, Rectangle, Circle, Curves, Dotted Lines etc.. By Using Canvas we can draw Images as well. We can process on Image. Using the html element is very easy, but we have a need a basic understanding of HTML and JavaScript. The default size of the canvas is 300 pixels × 150 pixels (width × height). But custom sizes can be defined using the HTML height and width property.
In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.
Let’s create Canvas Graphics & Shapes With HTML & JavaScript. Here we are creating multiple elements.
- Lines
- Dash Lines
- Rectangle
- Rectangle inside Rectangle
- Circle
- Draw Image inside Rectangle
- Draw Text
To Create Canvas element we use <canvas> element with an “Id” property and width, height property. By using Id property we can get Context of Canvas.
<canvas id=”myCanvas” width=”1200″ height=”450″ style=”border:1px solid #d3d3d3;”></canvas>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
</style>
<body>
<canvas id="myCanvas" width="1200" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
//Below is function to console current Mouse Position
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
// Console Log current Coordinate on Mouse Move
c.addEventListener('mousemove', (evt) => {
var mousePos = getMousePos(c, evt);
console.log(mousePos.x + ',' + mousePos.y);
})
// Get Context reference of Canvas
var ctx = c.getContext("2d");
drawInnerElements();
function drawInnerElements() {
//big rect
ctx.beginPath();
ctx.fillStyle = 'rgba(237, 246, 250, 1)';
ctx.fillRect(40, 0, 240, 450);
//big rect
ctx.beginPath();
ctx.fillStyle = 'rgba(237, 246, 250, 1)';
ctx.fillRect(440, 0, 150, 450);
// First rect
ctx.beginPath();
ctx.fillStyle = 'black';
ctx.fillRect(0, 130, 30, 80);
// JS text
ctx.beginPath();
ctx.font = "12px Arial";
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fillText("JS", 9, 150);
// inner small rect
ctx.beginPath();
ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
ctx.fillStyle = 'green';
ctx.rect(6, 182, 18, 18);
ctx.stroke();
ctx.fill();
// A text
ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fillText("A", 12, 194);
// test text
ctx.beginPath();
ctx.fillStyle = 'black';
ctx.fillText("Test", 55, 121);
// second rect
ctx.fillStyle = "orange";
ctx.fillRect(56, 130, 30, 80);
// draw image
var img = new Image;
img.src = './star.png';
img.onload = function () {
ctx.drawImage(img, 62, 140); // inside second rect
ctx.drawImage(img, 104, 140); // inside third rect
};
// inner small rect inside second rect
ctx.beginPath();
ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
ctx.fillStyle = 'green';
ctx.rect(62, 182, 18, 18);
ctx.stroke();
ctx.fill();
// B text
ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fillText("B", 68, 194);
// 3rd rect
ctx.fillStyle = "rgba(192, 194, 199, 1)";
ctx.fillRect(98, 130, 30, 80);
// 4th rect
ctx.fillStyle = "rgba(192, 194, 199, 1)";
ctx.fillRect(148, 130, 30, 80);
// inner small rect inside 4th rect
ctx.beginPath();
ctx.strokeStyle = 'white';
ctx.strokeRect(155, 140, 15, 22);
// 5th rect
ctx.fillStyle = "orange";
ctx.fillRect(232, 130, 30, 80);
// inner small rect inside 5th rect to upside
ctx.beginPath();
ctx.strokeStyle = 'white';
ctx.strokeRect(239, 140, 15, 22);
// inner small rect inside 5th rect
ctx.beginPath();
ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
ctx.fillStyle = 'green';
ctx.rect(237, 182, 18, 18);
ctx.stroke();
ctx.fill();
// C text of 5th rect
ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fillText("C", 243, 194);
//solid line
ctx.beginPath();
ctx.moveTo(0, 173);
ctx.lineWidth = 3;
ctx.strokeStyle = "orange";
ctx.lineTo(356, 172);
ctx.stroke();
// dashed line
ctx.beginPath();
ctx.strokeStyle = "orange";
ctx.setLineDash([5, 5]);
ctx.moveTo(356, 172);
ctx.lineTo(600, 173);
ctx.stroke();
// circle above dotted line
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.fillStyle = 'white';
ctx.setLineDash([]);
ctx.arc(400, 170, 10, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
// 6th rect
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.fillRect(928, 73, 30, 140);
// inner small rect inside 6th rect
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'white';
ctx.strokeRect(936, 122, 15, 21);
//solid line
ctx.beginPath();
ctx.moveTo(730, 173);
ctx.lineWidth = 3;
ctx.strokeStyle = "orange";
ctx.lineTo(800, 173);
ctx.stroke();
//solid line
ctx.beginPath();
ctx.moveTo(730, 173);
ctx.lineWidth = 3;
ctx.strokeStyle = "orange";
ctx.lineTo(860, 173);
ctx.stroke();
//solid line - second track
ctx.beginPath();
ctx.moveTo(735, 173);
ctx.lineWidth = 3;
ctx.strokeStyle = "orange";
ctx.lineTo(794, 114);
ctx.stroke();
// dashed line
ctx.beginPath();
ctx.strokeStyle = "orange";
ctx.setLineDash([5, 5]);
ctx.moveTo(600, 173);
ctx.lineTo(1078, 173);
ctx.stroke();
// dashed line - second track
ctx.beginPath();
ctx.strokeStyle = "orange";
ctx.setLineDash([5, 5]);
ctx.moveTo(794, 114);
ctx.lineTo(1078, 114);
ctx.stroke();
}
</script>
</body>
</html>
JSmount: https://jsmount.com
Canvas Drawing, Canvas Draw Circle, Canvas Draw Lines, Canvas Create Curves, canvas draw image, JavaScript Drawing Library, JavaScript Graphics, Canvas draw image, read more here https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
2 thoughts on “How to draw Canvas Image, Line & Circle With HTML & JavaScript”