Proyecto para dibujar en canvas con features como lapiz, borrador, grosor, velocidad de dibujo y color personalizables. Alojado en Github https://github.com/CarlosRami5/Canvas-Drawer
HTML:
<html><head><metacharset="utf-8" /><title>Canvas Drawer</title></head><style>body{
font-size: 25;
font-family: verdana;
background-color: lightblue;
}
h1{
font-family: Impact;
font-size: 80;
color: darkorange;
}
h2{
font-family: verdana;
font-size: 20;
}
canvas{
background-color: gray ;
}
</style><body><center><h1>Canvas Drawer</h1><h2>Use the arrows for drawing, it works well at 75% browser zoom</h2><canvaswidth="800"height="500"id='paper'></canvas><br/>Drawing Speed: <inputtype="number"id="movement"value="10"/>
Thickness: <inputtype="number"id="thickness"value="10"/><br/><inputtype="radio"name="tool"id="eraser"/>Eraser
<inputtype="radio"name="tool"id="pen"/>Pencil
<br/>Pencil color: <inputtype="color"id="color"value="#efa418" /><br/>Delete all <inputtype="reset"id="reset_button"value="reset"/><scriptsrc="Canvas Drawer.js"></script></center></body></html>JS:
var papertr = document.getElementById("paper");
var d = papertr.getContext('2d');
var text = document.getElementById("movement");
var color = document.getElementById("color");
var thickness = document.getElementById("thickness")
var xI = 400; //Initial X position
var yI = 250; //Initial Y position
var movement = 0;
pen.addEventListener("click",pencil) //Sets pencil mode
function pencil(){
color.value = "#efa418";
thickness.value = 10;
}
eraser.addEventListener("click",erase); //Sets eraser mode
function erase() {
color.value = "#808080";
thickness.value = 50;
}
reset_button.addEventListener("click",reset); //Resets everything
function reset(){
color.value = "#808080";
thickness.value = 1000;
draw(0,0,800,500);color.value = "#efa418";
thickness.value = 10;
xI = 400;
yI = 250;
}
document.addEventListener("keydown",draw2); //Detects when a key is pressed down and runs draw2 function
var teclas = {
UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39
};
console.log(teclas);
function draw(xi,yi,xf,yf) //drawing function
{
d.lineWidth = thickness.value;
d.strokeStyle = color.value;
d.beginPath();
d.moveTo(xi,yi);
d.lineTo(xf,yf);
d.closePath();
d.stroke();
}
function draw2(event2)
{
var movement = parseInt(text.value);switch (event2.keyCode)
{
case teclas.UP: //runs when arrowup is pressed down
draw(xI,yI,xI,yI - movement);
yI = yI - movement;break;case teclas.DOWN: //runs when arrowdown is pressed
draw(xI,yI,xI,yI + movement);
yI = yI + movement;break;case teclas.LEFT: //runs when arrowleft is pressed
draw(xI,yI,xI - movement,yI);
xI = xI - movement;break;case teclas.RIGHT: //runs when arrowright is pressed
draw(xI,yI,xI + movement,yI);
xI = xI + movement;break;
}
}
function dibujaTeclado(evento) //just an example, ignore it
{
if (evento.keyCode == teclas.DOWN)
{
alert("Abajo");
}
if (evento.keyCode == teclas.UP)
{
alert("Arriba");
}
if (evento.keyCode == teclas.LEFT )
{
alert("Izquierda");
}
if (evento.keyCode == teclas.RIGHT) {
alert("Derecha");
}
}
En proximas versiones añadiré la feature de dibujar con el mouse
