Scribd
Upload
9 views4 pages

Labsheet 2

Uploaded by

googooaaf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views4 pages

Labsheet 2

Uploaded by

googooaaf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Course Code: CSE3150

Course Title: Front End Full Stack Development


Lab sheet 2 - Module 1
Problem Statement:
The problem statement: To create a canvas drawing application that allows users to draw on the
canvas by clicking and dragging the mouse. To achieve this, use HTML5 code that includes a canvas
element with an event attribute that listens for mousedown, mousemove, and mouseup events. These
events shoud trigger JavaScript functions that draw lines on the canvas based on the user's mouse
movements. The canvas element can be styled using CSS to have a black border. Use article, section,
attributes to enhance the web page.

Solution

<!DOCTYPE html>
<html>
<head>

<title>Canvas Example</title>
<style>

canvas {
border: 1px solid black;

}
</style>

</head>
<body>

<header>
<h1>Canvas Example</h1>
<p>Draw on the canvas by clicking and dragging the mouse</p>

</header>
<article>
<h2>Canvas</h2>
<canvas id="myCanvas" width="400" height="400"
onmousedown="startDrawing(event)" onmousemove="drawLine(event)"
onmouseup="stopDrawing(event)"></canvas>

</article>
<script>

var canvas = document.getElementById("myCanvas");


var ctx = canvas.getContext("2d");

var isDrawing = false;


function startDrawing(event) {
isDrawing = true;

var x = event.clientX - canvas.offsetLeft;


var y = event.clientY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x, y);

function drawLine(event) {
if (isDrawing) {
var x = event.clientX - canvas.offsetLeft;

var y = event.clientY - canvas.offsetTop;


ctx.lineTo(x, y);

ctx.stroke();
}

function stopDrawing(event) {
isDrawing = false;

}
</script>
</body>
</html>
Output:

You might also like