Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to draw with mouse in HTML 5 canvas?
HTML5 has a division element to create the box to draw with the mouse. Developers can create dynamic, interactive graphics for the web using the strong and adaptable HTML5 canvas technology. Drawing on canvas can be performed with a variety of tools and methods. The users can create free-form shapes and lines by dragging their cursor across the canvas when drawing with a mouse, i.e. a common technique. Simple sketches of all diagrams and illustrations will be produced using this method.
Properties Used
The following properties are used in the example −
width − Define the width of the body.
height − Define the height of the body.
border − Define by styling the width and color of a border element.
cursor − The mouse cursor that will be visible when the mouse is over an element is specified by the cursor property.
display − Define the behavior of the display.
padding − This property defines the space between the border and content.
margin − This property set the margin of an element such as margin-top, margin-left, and margin-bottom.
background-color − This property set the background color of an element.
font-weight − This property species the text is bold.
color − Define the color of the text.
Example
In the following example, the code below shows how to use HTML canvas and JavaScript to draw a line with the mouse. The code adds event listeners to the HTML canvas element and creates an HTML canvas element to track mouse movements. When the user clicks on the canvas, the "mousedown" event is triggered, which records the mouse's initial coordinates. While the user is dragging the mouse, the code listens for the "mousemove" event and draws a line between the initial and final coordinates. When the user releases the mouse, the "mouseup" event is triggered, and the drawing is finished. This code enables the user to freely draw with the mouse on the canvas, providing a simple and interactive way to create digital art or visual content.
<!DOCTYPE html>
<html>
<head>
<title>Draw mouse with HTML</title>
<style>
.content{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#canvas{
border: 3px solid seagreen;
width: 560px;
height: 360px;
}
</style>
</head>
<body>
<div class="content">
<h1>
Drawing with mouse Event
</h1>
<canvas id="canvas" width="560" height="360"></canvas>
</div>
<script>
var x = 0;
var y = 0;
var isdrawing = false;
const cnv = document.getElementById("canvas");
const ctx = cnv.getContext("2d");
cnv.addEventListener("mousedown", (e) => {
x = e.offsetX;
y = e.offsetY;
isdrawing = true;
});
cnv.addEventListener("mousemove" ,(e) =>{
if(isdrawing === true){
drawLine(x, y, e.offsetX, e.offsetY);
x = e.offsetX;
y = e.offsetY;
}
});
cnv.addEventListener("mouseup" ,(e) => {
if( isdrawing === true){
drawLine(x, y, e.offsetX, e.offsetY);
x = 0;
y = 0;
isdrawing = false;
}
});
function drawLine(x1, y1, x2, y2){
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.closePath();
}
</script>
</body>
</html>
Conclusion
The above output represents by drawing with the mouse in HTML5. We used the internal CSS to define the properties of the id and classes named pen, eraser, canvas, tool, and selected that define the styling to the elements of HTML. Then use of some functions and event listeners using javascript builds the strong tool. Therefore, this is also a kind of whiteboard.
850 Views
To Continue Learning Please Login