Paint with Canvas, HTML5 and jQuery






In the following example, I want to show a paint made ​​with html5, canvas and jquery. I have also used Twitter Bootstrap and farbtastic:

paint canvas html 5

See live example clicking here

You can download all the files clicking here

Most important files – index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Paint HTML5 Canvas www.Ajax101.com</title>
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://web.desarrollaraplicaciones.com/paint/dibujo.js" type="text/javascript"></script>
<script type="text/javascript" src="js/draw.js"></script>
<script type="text/javascript" src="js/farbtastic/farbtastic.js"></script>
<script type="text/javascript" src="js/jscolor/jscolor.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

<!-- Style -->
<link rel="stylesheet" href="js/farbtastic/farbtastic.css" type="text/css" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

</head>
<body>
<br/>
<table>

<tr>
<td></td><td>
<button id="btnDelete" class="btn btn-danger">
Delete
</button>
<button id="btnUndo" class="btn btn-info">
Undo
</button>
<button id="btnRedo" class="btn btn-info">
Redo
</button></td>
</tr>
<tr>
<td>
<center>
<div id="colorpicker"></div>
</center>
<center>
<input type="text" id="color" name="color" />
</center>
<br/>
<center>Thickness:
<select id="brushThick" style="width: 60px">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="9" selected="selected">9</option>
<option value="11">11</option>
<option value="14">14</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="70">70</option>
</select></center>
<br/>

<center><a target="_blank" href="http://ajax101.com"><button class="btn btn-success">Help</button></a></center>
</td>
<td><canvas id="myCanvas" width="800" height="400" style="border:2px solid black"></canvas></td>
</tr>
</table>

</body>
</html>

 

Most important files – draw.js

$(document).ready(function() {
InitThis();
var mousePressed = false;
var lastX, lastY;
var ctx;
var canvasWidth = 800;
var canvasHeight = 400;
var text = "no";
var toolTip = "no";
var sizeSmall = 3;
var sizeMedium = 8;
var sizeBig = 12;
var sizeHuge = 18;
var curSize = sizeSmall;

$('#colorpicker').farbtastic('#color');

var div1 = document.getElementById('myCanvas');

function posicion(posicion) {
var fontSize = $("#colorFuente").val();
var fontSize = $('#tamanoFuente').val();
var cuadro = document.getElementById("cuadro");
cuadro.style.color = "#" + fontSize;
cuadro.style.fontSize = fontSize + "px";
cuadro.style.fontFamily = "Arial";
cuadro.style.display = "table";
cuadro.innerHTML = textoTextoPoner;
cuadro.style.left = posicion.clientX + 1 + "px";
cuadro.style.top = posicion.clientY - 25 + "px";

this.onclick = function() {
ctx.fillStyle = "#" + fontSize;
ctx.font = "bold " + fontSize + " Arial";
mostrar = "no";
return;
}
}

 

$("#btnUndo").click(function() {
cUndo();
});
$("#btnRedo").click(function() {
cRedo();
});
$("#btnDelete").click(function() {
drawImage();
});

function InitThis() {
ctx = document.getElementById('myCanvas').getContext("2d");
$('#myCanvas').mousedown(function(e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});

$('#myCanvas').mousemove(function(e) {
if (mousePressed) {
if (text == "no") {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
if (text == "si") {
}
}
});

$('#myCanvas').mouseup(function(e) {
if (mousePressed) {
mousePressed = false;
cPush();
}
});

$('#myCanvas').mouseleave(function(e) {
if (mousePressed) {
mousePressed = false;
cPush();
}
});
drawImage();
}

function drawImage() {
var image = new Image();
image.src = 'img/background.jpg';
$(image).load(function() {
ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
cPush();
});
}

function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = curColor;
ctx.lineWidth = $('#brushThick').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x;
lastY = y;
}

var cPushArray = new Array();
var cStep = -1;

function cPush() {
cStep++;
if (cStep < cPushArray.length) {
cPushArray.length = cStep;
}
cPushArray.push(document.getElementById('myCanvas').toDataURL());
document.title = cStep + ":" + cPushArray.length;
}

function cUndo() {
if (cStep > 0) {
cStep--;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function() {
ctx.drawImage(canvasPic, 0, 0);
}
document.title = cStep + ":" + cPushArray.length;
}
}

function cRedo() {
if (cStep < cPushArray.length - 1) {
cStep++;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function() {
ctx.drawImage(canvasPic, 0, 0);
}
document.title = cStep + ":" + cPushArray.length;
}
}

});




 
Leave a Comment
Your comment: