How To Draw On Html Page

How to draw with mouse in HTML v canvas ?

In this article, nosotros shall explore a few ways to draw with the mouse arrow on the HTML five canvas. The HTML canvas is essentially a container for diverse graphics elements such every bit squares, rectangles, arcs, images, etc. It gives us flexible command over animating the graphics elements inside the canvas. However, functionality to the canvas has to be added through JavaScript.

In the following procedure, we will use a flag variable to toggle the drawing on and off in relation to the mouse events. The events we will be listening to the mousedown, mouseup and the mousemove events in JavaScript.

The sail chemical element past default has some backdrop such as padding etc.(can exist changed styles). Hence, properties offsetTop and offsetLeft are used to retrieve the position of the canvas, relative to its offsetParent (closest antecedent element of the canvas in the DOM). Past subtracting these values from event.clientX and event.clientY, we can reposition the starting bespeak of the drawing to the tip of the cursor. In the function sketch(), we use the post-obit in-congenital methods to add functionality.

beginPath(): Starts a new path, every time left mouse push is clicked.
lineWidth: Sets the width of the line that will be drawn.
strokeStyle: In this regard, we use it to set the color of the line to black. This aspect tin can be inverse to produce lines of unlike colors.
moveTo(): The Starting position of the path moves to the specified coordinates on the canvas.
lineTo(): Creates a line to from the said position to the coordinates specified.
stroke(): Adds stroke to the line created. Without this, the line will non be visible.

Creating a Canvas Chemical element:

<!DOCTYPE html>

< html lang = "en" >

< caput >

< meta charset = "UTF-viii" >

< meta proper noun = "viewport" content =

"width=device-width, initial-scale=1.0" >

< title >

Draw with the mouse in a HTML5 sheet

</ championship >

< fashion >

* {

overflow: hidden;

}

torso {

text-align: center;

}

h1 {

color: green;

}

</ style >

</ head >

< trunk >

< h1 >GeeksforGeeks</ h1 >

< b >Describe anything you want</ b >

< hr >

< canvas id = "sail" ></ canvas >

< script src = "index.js" ></ script >

</ body >

</ html >
JavaScript lawmaking to make interactive canvas:

window.addEventListener( 'load' , ()=>{

resize();

document.addEventListener( 'mousedown' , startPainting);

certificate.addEventListener( 'mouseup' , stopPainting);

document.addEventListener( 'mousemove' , sketch);

window.addEventListener( 'resize' , resize);

});

const canvas = certificate.querySelector( '#canvas' );

const ctx = sail.getContext( '2d' );

function resize(){

ctx.canvas.width = window.innerWidth;

ctx.canvas.height = window.innerHeight;

}

let coord = {x:0 , y:0};

let paint = false ;

role getPosition(event){

coord.10 = event.clientX - canvas.offsetLeft;

coord.y = result.clientY - sail.offsetTop;

}

function startPainting(event){

pigment = true ;

getPosition(event);

}

role stopPainting(){

paint = false ;

}

role sketch(upshot){

if (!paint) return ;

ctx.beginPath();

ctx.lineWidth = v;

ctx.lineCap = 'round' ;

ctx.strokeStyle = 'green' ;

ctx.moveTo(coord.10, coord.y);

getPosition(issue);

ctx.lineTo(coord.x , coord.y);

ctx.stroke();

}
Output: The function sketch() will only execute if the value of the flag is true.Information technology is important to update the coordinates stored in the object coord subsequently beginPath(), hence getPosition(event) is chosen. Later linking the JavaScript file to the HTML file, the following code will be obtained.