Created
June 2, 2013 16:36
-
-
Save mparke/5694070 to your computer and use it in GitHub Desktop.
Canvas Line Drawing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(){ | |
var ctx = document.getElementById('draw-canvas').getContext('2d'), | |
penX = [], | |
penY = [], | |
saveStates = [], | |
drawOn = false, | |
trackingInitialized = false, | |
canvasWidth, canvasHeight; | |
ctx.strokeStyle = '#000'; | |
ctx.lineJoin = 'round'; | |
ctx.lineWidth = 3; | |
//listener for tracking our pen and redrawing | |
function moveUpdate(e){ | |
if(drawOn === true){ | |
//keep saving the new x and y values of the mouse | |
penX.push(e.offsetX); | |
penY.push(e.offsetY); | |
ctx.clearRect(0, 0, canvasWidth, canvasHeight); | |
ctx.putImageData(saveStates[saveStates.length - 1], 0, 0); | |
ctx.beginPath(); | |
for(var i = 1; i < penX.length; i++){ | |
ctx.moveTo(penX[i - 1], penY[i - 1]); | |
ctx.lineTo(penX[i], penY[i]); | |
} | |
ctx.closePath(); | |
ctx.stroke(); | |
} | |
} | |
//again, we only want to draw when the user is holding the mouse button down, so here's two additional listeners to handle that | |
function downUpdate(e){ | |
if(trackingInitialized === false){ | |
penX.push(e.offsetX); | |
penY.push(e.offsetY); | |
saveStates.push(ctx.getImageData(0, 0, canvasWidth, canvasHeight)); | |
trackingInitialized = true; | |
} | |
drawOn = true; | |
} | |
//when the user lets go, we need to update our booleans | |
function letGoUpdate(e){ | |
saveStates.push(ctx.getImageData(0, 0, canvasWidth, canvasHeight)); | |
drawOn = false; | |
penX.splice(0, penX.length); | |
penY.splice(0, penY.length); | |
} | |
function clearCanvas(){ | |
ctx.clearRect(0, 0, canvasWidth, canvasHeight); | |
saveStates.splice(0, saveStates.length); | |
trackingInitialized = false; | |
} | |
function convertToPNG(){ | |
//get our image data, we will use a data url to create a image element | |
var doc = document, | |
imageContainer = doc.getElementById('image-container'), | |
dataUrl = doc.getElementById('draw-canvas').toDataURL(), | |
image = doc.createElement('img'); | |
$('#image-container').empty().append('<p>Right Click > Save as</p>'); | |
image.src = dataUrl; | |
imageContainer.appendChild(image); | |
} | |
function clearImage(){ | |
$('#image-container').empty(); | |
} | |
function init(){ | |
var doc = document, | |
drawCanvas = doc.getElementById('draw-canvas'), | |
clearCanvasButton = doc.getElementById('clear-canvas-button'), | |
convertCanvasButton = doc.getElementById('convert-canvas-button'), | |
clearImageButton = doc.getElementById('clear-image-button'); | |
canvasWidth = drawCanvas.width; | |
canvasHeight = drawCanvas.height; | |
//draw handlers | |
drawCanvas.addEventListener('mousemove', moveUpdate, false); | |
drawCanvas.addEventListener('mousedown', downUpdate, false); | |
drawCanvas.addEventListener('mouseup', letGoUpdate, false); | |
//clear and conversion handlers | |
clearCanvasButton.addEventListener('click', clearCanvas, false); | |
convertCanvasButton.addEventListener('click', convertToPNG, false); | |
clearImageButton.addEventListener('click', clearImage, false); | |
} | |
init(); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment