HTML and CSS Reference
In-Depth Information
function beginCanvasDrawing() {
var brush = "rgba(200, 34, 2, .5)";
canvas.addEventListener("mousedown", function (event) {
mouseIsDown = true;
clearCanvas();
context.beginPath();//starts the drawing once users mouse is down
}, false);
canvas.addEventListener("mousemove", function (event) {
if (mouseIsDown) {
canvas.style.cursor = "pointer";
context.strokeStyle = brush;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 15;
context.shadowColor = brush;
context.lineWidth = 5;
context.lineJoin = "round";
context.lineTo(event.layerX, event.layerY);
context.stroke();
} else {
console.log("hold mouse button down")
}
}, false);
canvas.addEventListener("mouseup", function (event) {
mouseIsDown = false;
var colors = context.getImageData(event.layerX, event.layerY, 10, 10).data;
console.log(colors);
brush = "rgba(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ",
" + colors[3] + ")";
console.log(brush);
}, false);
saveBtn.style.visibility = "visible";
saveBtn.innerHTML = "Save Your Creation";
saveBtn.addEventListener("click", function (event) {
var newImg = new Image();
newImg.src = canvas.toDataURL();
window.location.href = newImg.src.replace('image/png',
'image/octet-stream');
}, false);
}
}
window.addEventListener('DOMContentLoaded', adInit, false);
</script>
</body>
</html>
