Last active
July 29, 2018 11:28
-
-
Save MohammedEssehemy/7773042b6e14d772f3ca567dfee08f5f to your computer and use it in GitHub Desktop.
html canvas draw with background
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
<html> | |
<script type="text/javascript"> | |
var canvas, canvasimg, backgroundImage, finalImg; | |
var mouseClicked = false; | |
var prevX = 0; | |
var currX = 0; | |
var prevY = 0; | |
var currY = 0; | |
var fillStyle = "black"; | |
var globalCompositeOperation = "source-over"; | |
var lineWidth = 2; | |
function init() { | |
var imageSrc = '/abstract-geometric-pattern_23-2147508597.jpg' | |
backgroundImage = new Image(); | |
backgroundImage.src = imageSrc; | |
canvas = document.getElementById('can'); | |
finalImg = document.getElementById('finalImg'); | |
canvasimg = document.getElementById('canvasimg'); | |
canvas.style.backgroundImage = "url('" + imageSrc + "')"; | |
canvas.addEventListener("mousemove", handleMouseEvent); | |
canvas.addEventListener("mousedown", handleMouseEvent); | |
canvas.addEventListener("mouseup", handleMouseEvent); | |
canvas.addEventListener("mouseout", handleMouseEvent); | |
} | |
function getColor(btn) { | |
globalCompositeOperation = 'source-over'; | |
lineWidth = 2; | |
switch (btn.getAttribute('data-color')) { | |
case "green": | |
fillStyle = "green"; | |
break; | |
case "blue": | |
fillStyle = "blue"; | |
break; | |
case "red": | |
fillStyle = "red"; | |
break; | |
case "yellow": | |
fillStyle = "yellow"; | |
break; | |
case "orange": | |
fillStyle = "orange"; | |
break; | |
case "black": | |
fillStyle = "black"; | |
break; | |
case "eraser": | |
globalCompositeOperation = 'destination-out'; | |
fillStyle = "rgba(0,0,0,1)"; | |
lineWidth = 14; | |
break; | |
} | |
} | |
function draw(dot) { | |
var ctx = canvas.getContext("2d"); | |
ctx.beginPath(); | |
ctx.globalCompositeOperation = globalCompositeOperation; | |
if(dot){ | |
ctx.fillStyle = fillStyle; | |
ctx.fillRect(currX, currY, 2, 2); | |
} else { | |
ctx.beginPath(); | |
ctx.moveTo(prevX, prevY); | |
ctx.lineTo(currX, currY); | |
ctx.strokeStyle = fillStyle; | |
ctx.lineWidth = lineWidth; | |
ctx.stroke(); | |
} | |
ctx.closePath(); | |
} | |
function erase() { | |
if (confirm("Want to clear")) { | |
var ctx = canvas.getContext("2d"); | |
ctx.clearRect(0, 0, canvas.width, canvas.height); | |
document.getElementById("canvasimg").style.display = "none"; | |
} | |
} | |
function save() { | |
canvas.style.border = "2px solid"; | |
canvasimg.width = canvas.width; | |
canvasimg.height = canvas.height; | |
var ctx2 = canvasimg.getContext("2d"); | |
// comment next line to save the draw only | |
ctx2.drawImage(backgroundImage, 0, 0); | |
ctx2.drawImage(canvas, 0, 0); | |
finalImg.src = canvasimg.toDataURL(); | |
finalImg.style.display = "inline"; | |
} | |
function handleMouseEvent(e) { | |
if (e.type === 'mousedown') { | |
prevX = currX; | |
prevY = currY; | |
currX = e.offsetX; | |
currY = e.offsetY; | |
mouseClicked = true; | |
draw(true); | |
} | |
if (e.type === 'mouseup' || e.type === "mouseout") { | |
mouseClicked = false; | |
} | |
if (e.type === 'mousemove') { | |
if (mouseClicked) { | |
prevX = currX; | |
prevY = currY; | |
currX = e.offsetX; | |
currY = e.offsetY; | |
draw(); | |
} | |
} | |
} | |
</script> | |
<body onload="init()"> | |
<canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"> | |
</canvas> | |
<div style="position:absolute;top:12%;left:43%;">Choose Color</div> | |
<div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" data-color="green" onclick="getColor(this)"></div> | |
<div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" data-color="blue" onclick="getColor(this)"></div> | |
<div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" data-color="red" onclick="getColor(this)"></div> | |
<div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" data-color="yellow" onclick="getColor(this)"></div> | |
<div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" data-color="orange" onclick="getColor(this)"></div> | |
<div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" data-color="black" onclick="getColor(this)"></div> | |
<div style="position:absolute;top:20%;left:43%;">Eraser</div> | |
<div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" data-color="eraser" onclick="getColor(this)"></div> | |
<canvas id="canvasimg" style="display:none;" ></canvas> | |
<img id="finalImg" style="position:absolute;top:10%;left:52%;display:none;" > | |
<input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;"> | |
<input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;"> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment