Build a 2D Paint Drawing Pad Canvas Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

You are currently viewing Build a 2D Paint Drawing Pad Canvas Web App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a 2d paint drawing pad canvas web app in browser using html5 css3 and javascript.All the full source code of the application is given below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div id="sketch">
  <canvas id="paint"></canvas>
</div>

<div id="settings"> Colours
  <button onclick="getColor('blue');">Blue</button>
  <button onclick="getColor('red');">Red</button>
  <button onclick="getColor('green');">Green</button>
  <button onclick="getColor('white');">White</button>
  <button onclick="getColor('#333333');">Eraser</button>
</div>

<div id="settings"> Brush Size
  <button onclick="getSize('2');">Small</button>
  <button onclick="getSize('5');">Med</button>
  <button onclick="getSize('10');">Large</button>
  <button onclick="getSize('20');">X Large</button>
</div>

 

 

And now we need to make a style.css file and copy paste the following code

 

 

style.css

 

 

*{font-family:sans-serif;}

#settings { display: block; text-align:center}


#paint {border: 1px solid black; background : #333333; margin-left: auto; margin-right: auto; display: block;}

 

 

And now make a script.js file and copy paste the following code

 

 

script.js`

 

var canvas = document.getElementById('paint');
var ctx = canvas.getContext('2d');
 
var sketch = document.getElementById('sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = 500;
canvas.height = 250;

var mouse = {x: 0, y: 0};
 
/* Mouse Capturing Work */
canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;
}, false);

/* Drawing on Paint App */
ctx.lineJoin = 'round';
ctx.lineCap = 'round';

ctx.strokeStyle = "red";
function getColor(colour){ctx.strokeStyle = colour;}

function getSize(size){ctx.lineWidth = size;}


//ctx.strokeStyle = 
//ctx.strokeStyle = document.settings.colour[1].value;
 
canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);
 
    canvas.addEventListener('mousemove', onPaint, false);
}, false);
 
canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);
 
var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
};

 

 

And now if you open the index.html file inside the browser you will see the below output as shown below

 

 

Leave a Reply