0% found this document useful (0 votes)

7 views

Css 43

Uploaded by

soham patil

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

7 views

Css 43

Uploaded by

soham patil

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 13

ONLINE DRAWING BOARD

MAHARASHTRA STATE BOARD OF

TECHNICAL EDUCATION

Vidyavardhini Institute Of Technology, Pal, Gargoti

MICROPROJECT

Academic Year: 2023-24

TITLE OF PROJECT

ONLINE DRAWING BOARD

Program: Computer Engineering Program

code:CO5I Course: CSS Course code:

VVIT, PAL 1
ONLINE DRAWING BOARD

MAHARASHTRA STATE

BOARD OF TECHNICAL EDUCATION

Certificate

This is to certify that Roll no. 43 of V Semester of Diploma in Computer Engineering of

Institute, VVIT, Pal (Code: 1207) has completed the Micro Project satisfactorily in Subject

(AJP) for the academic year 2023-24 as prescribed in the curriculum.

Sr.No Name Roll No Enrollment No Seat No

1 Ajit Balvant Repe 43 2112070086

Subject Teacher Head of the Department Principle

VVIT, PAL 2
ONLINE DRAWING BOARD

INDEX

SR.NO CONTENT PAGE NO

1 PROJECT NAME 4

2 INTRODUCTION 5

3 CODE 6-8

4 OUTPUT 9

5 CONCLUSION 10

6 Weekly Progress Report 11

7 Annexure-II 12-13

VVIT, PAL 3
ONLINE DRAWING BOARD

ONLINE DRAWING
BOARD

VVIT, PAL 4
ONLINE DRAWING BOARD

INTRODUCTION

In the digital age, creative expression has found a new canvas—the web. The
Online Drawing Board is an interactive web application that brings the joy of
drawing and painting to the digital realm. Using a combination of HTML
and JavaScript, this project provides users with a platform to unleash their
artistic talents, whether for fun, learning, or even professional design.

The Online Drawing Board allows users to create, sketch, and paint directly
within the web browser. It provides a canvas on which users can draw, and as
they move the mouse or touch input, lines and shapes come to life. This project
opens up a world of possibilities for both beginner and experienced artists, as
well as anyone looking to explore their creativity.

This introduction sets the stage for the project, emphasizing its significance in
the world of digital art and the potential it holds for enabling users to express
themselves in a visual and interactive manner.

VVIT, PAL 5
ONLINE DRAWING BOARD

CODE

<!DOCTYPE html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas Drawing Board | onlyWebPro.com</title>
<style>
body {
margin: 0;
}
#board {
margin: 0 auto;
width: 500px;
}
#myCanvas {
border: 3px dotted #000;
}
</style>
</head>

<body>
<div id="b
oard">
<canvas id="myCanvas" width="500px" height="500px">
Sorry, your browser doesn't support canvas technology.
</canvas>

VVIT, PAL 6
ONLINE DRAWING BOARD

<p>Color picker: <select id="selectColor">

<option id="colBlack" value="black"
selected="selected">Black</option>
<option id="colRed" value="red">Red</option>
<option id="colBlue" value="blue">Blue</option>
<option id="colGreen" value="green">Green</option>
<option id="colOrange" value="orange">Orange</option>
<option id="colYellow" value="yellow">Yellow</option>
</select>
</p>
</div>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"
>
</script>
<script type="text/javascript">
window.onload = function () {
var myCanvas = document.getElementById("myCanvas");
var curColor = $('#selectColor option:selected').val();
if (myCanvas) {
var isDown = false;
var ctx = myCanvas.getContext("2d");
var canvasX, canvasY;
ctx.lineWidth = 5;
$(myCanvas)
.mousedown(function (e)
{ isDown = true;
ctx.beginPath();

VVIT, PAL 7
ONLINE DRAWING BOARD

canvasX = e.pageX - myCanvas.offsetLeft;

canvasY = e.pageY - myCanvas.offsetTop;
ctx.moveTo(canvasX, canvasY);
})
.mousemove(function (e)
{ if (isDown != false) {
canvasX = e.pageX - myCanvas.offsetLeft;
canvasY = e.pageY - myCanvas.offsetTop;
ctx.lineTo(canvasX, canvasY);
ctx.strokeStyle = curColor;
ctx.stroke();
}
})
.mouseup(function (e)
{ isDown = false;
ctx.closePath();
});
}
$('#selectColor').change(function () {
curColor = $('#selectColor option:selected').val();
});

};
</script>
</body>
</html>

VVIT, PAL 8
ONLINE DRAWING BOARD

OUTPUT

VVIT, PAL 9
ONLINE DRAWING BOARD

CONCLUSION

The Online Drawing Board project has successfully brought the world of art
and creativity to the digital landscape, offering users an intuitive and interactive
platform for self-expression and artistic exploration. By harnessing the power of
HTML and JavaScript, this project has created a versatile and accessible
drawing tool that caters to a wide range of users, from budding artists to
seasoned professionals.

Throughout the development of the Online Drawing Board, the project has
demonstrated its ability to capture and convey the essence of traditional drawing
and painting while providing the advantages of digital technology. Users can
create, modify, and experiment with their artistic visions in a virtual canvas,
freeing them from the constraints of physical media.

VVIT, PAL 10
ONLINE DRAWING BOARD