Description: I've implemented a canvas drawing feature on my webpage with the provided code. Users can select colors and draw, but for some reason, the selected color is not functioning properly. Any assistance in resolving this issue would be greatly appreciated.
p.s. Clicking the button will open up the canvas.
Demo: jsfiddle
<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
<div></div>
<div class="cancel" onclick="closePopup();"></div>
<canvas id="canvas1" width="750" height="720" style="border: 1px solid black">
</canvas>
<p> </p>
<p>
<input type="button" id="Orange" style="background-color: orange; width: 25px;
height: 25px;"/>
<input type="button" id="Yellow" style="background-color: yellow; width: 25px;
height: 25px;"/>
<input type="button" id="Green" style="background-color: green; width: 25px;
height: 25px;"/>
<input type="button" id="Blue" style="background-color: blue; width: 25px;
height: 25px;"/>
<input type="button" id="Purple" style="background-color: purple; width: 25px;
height: 25px;"/>
<input type="button" id="Brown" style="background-color: brown; width: 25px;
height: 25px;"/>
<input type="button" id="Black" style="background-color: black; width: 25px;
height: 25px;"/>
<input type="button" id="White" style="background-color: white; width: 25px;
height: 25px;"/>
</p>
<p><input type="button" id="reset_image" value="Reset Drawing"/></p>
</div>
<style>
#canvas1 {
left:0;
top:0;
}
.popup{
position:absolute;
top:0px;
left:0px;
margin:0px;
width: 900px;
height: 750px;
font-family:verdana;
font-size:13px;
background-color:white;
border:2px solid grey;
z-index:100000000000000000;
display:none;
opacity:0.6;
filter:alpha(opacity=60);
margin-left: 300px;
margin-top: 90px;
overflow: auto;
}
.cancel{
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
.cancel:hover{
background:rgb(255,50,50);
}
</style>
<script>
function openPopup() {
var p = document.getElementById('test');
p.style.display = 'block';
canvas.width = parseInt(p.style.width, '10'); //only when you use pixels
canvas.height = parseInt(p.style.height, '10');
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var isPressed = false;
var mx = 4, my = 4;
function move(e) {
getMouse(e);
if (isPressed) {
ctx.lineTo(mx, my);
ctx.stroke()
}
}
function up(e) {
getMouse(e);
isPressed = false;
}
function down(e) {
getMouse(e);
ctx.beginPath();
ctx.moveTo(mx, my);
isPressed = true;
}
can.onmousemove = move;
can.onmousedown = down;
can.onmouseup = up;
// way oversimplified:
function getMouse(e) {
var element = can, offsetX = 0, offsetY = 0;
mx = e.pageX - 305;
my = e.pageY - 95;
}
</script>