In this tutorial we will create a simple Paint (Blackboard) in JavaScript. We will follow a few simple steps writing some code very easy to understand. we can start:
INDEX.HTML
1 - We need to create a canvas tag in the html file, which is where we paint. We stand between the <body> and </body> tags and write:
| <body> <canvas id="canvas" width="500" height="500">Your browser does not support canvas </canvas> </body> |
We just create a canvas with a size of 500x500. And if your browser doesn't support canvas we shows the message.
2 - We need to create a button that when pressed clear the screen.whether should we just under the canvas tag.
| <body> <canvas id="canvas" width="500" height="500">Your browser does not support canvas </canvas> <form> <button id="btn_delete">Delete</button> </form> </body> |
3 - Now, we create the link to our javascript file, called "paint.js". It's inside of the folder "javascript".
| <body> <canvas id="canvas" width="500" height="500">Your browser does not support canvas </canvas> <form> <button id="btn_delete">Delete</button> </form> <script type="text/javascript" src="javascript/paint.js"></script> </body> |
4 - We need see the canvas area, so we make a little css style . We go between <head> and </head> and write:
| <head> <!-- another sentences --> <style type="text/css"> #canvas { border: 1px solid #000; margin-left: 100px; } </style> </head> |
if you like, you can use more css style, but in this tutorial we do not stop because the style is not important.
Paint.js
4. We need get the Html elements, and we call them:
// get de HTML elements
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var btn_delete = document.getElementById("btn_delete"); |
And we create the de context variable.
5. We configure the pencil:
// Define the pencil size
ctx.lineWidth = 7;
// Pencil colour
ctx.strokeStyle = "blue";
6. Create the mouse events:
// When the mouse is pushed call the function startPaint
canvas.addEventListener("mousedown",startPaint,false);
// When the mouse isn´t pushed call the function overPaint
canvas.addEventListener("mouseup",overPaint,false);
// When the button is clicked call the function deletePaint
btn_delete.addEventListener("click",deletePaint,false);
7. Finaly we create the funcions
// Is placed in the position of the mouse and make the event
// that moving the mouse call the paint function
function startPaint(e){
ctx.beginPath();
ctx.moveTo(x_pos(e),y_pos(e));
canvas.addEventListener("mousemove",paint,false);
}
// Painting path of the mouse
function paint(e) {
ctx.lineTo(x_pos(e),y_pos(e));
ctx.stroke();
}
// disable the mouse move event, so stop painting
function overPaint(e){
canvas.removeEventListener("mousemove",paint,false);
}
//if you redefine the size of the canvas, the screen is clean
function deletePaint(){
canvas.width = canvas.width;
}
// This function find out the position of the mouse on the canvas,
// contrasting the position of the canvas in the window
function x_pos(ev){
return ev.clientX - canvas.offsetLeft - container.offsetLeft - div_canvas.offsetLeft;
}
function y_pos(ev){
return ev.clientY- canvas.offsetTop - div_canvas.offsetTop;
}
Demo
We just create a paint in javascript, if you want to see a demo:
This demo has some css styles and some changes in the code but are exclusively design and not vary the implementation of software.
You can find the code in github:
I hope you liked it, and if you have any questions feel free to write me
No comments:
Post a Comment