I have some html5 canvas code to make an image, the current fillstyle is green, but when I link is clicked, it should change to red, but it's not working. How do I fix this? thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
".dtd">
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = "rgb(0,200,0)";
context.fillRect (0, 0, 608, 105);
var img = new Image();
img.src = 'Round Borders.png';
context.drawImage(img,0,0);
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
};
</script>
<script type="text/javascript">
function change_bg_color(val) {
document.getElementById('myCanvas').getContext('2d').fillStyle = val;
}
</script>
</head>
<body onmousedown="return false;">
<canvas id="myCanvas" width="608" height="105" style="display:none;"></canvas>
<img id="canvasImg" title="Right click to save me!">
<br/>
<a href="#" onclick="change_bg_color('rgb(200,0,0)');">change to red</a>
</body>
</html>
I have some html5 canvas code to make an image, the current fillstyle is green, but when I link is clicked, it should change to red, but it's not working. How do I fix this? thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = "rgb(0,200,0)";
context.fillRect (0, 0, 608, 105);
var img = new Image();
img.src = 'Round Borders.png';
context.drawImage(img,0,0);
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
};
</script>
<script type="text/javascript">
function change_bg_color(val) {
document.getElementById('myCanvas').getContext('2d').fillStyle = val;
}
</script>
</head>
<body onmousedown="return false;">
<canvas id="myCanvas" width="608" height="105" style="display:none;"></canvas>
<img id="canvasImg" title="Right click to save me!">
<br/>
<a href="#" onclick="change_bg_color('rgb(200,0,0)');">change to red</a>
</body>
</html>
-
2
That's not really how
<canvas>works. You have to re-draw the figure. – Pointy Commented Jun 19, 2012 at 18:31 - @sneaky, you changing the fill color but not drawing anything with it. – Juicy Scripter Commented Jun 19, 2012 at 18:33
1 Answer
Reset to default 3Working Demo
Think of fillStyle like choosing your paint for an actual painters canvas. You have to choose your paint first, then begin painting. If you want to change your color you have to dip your brush and repaint.
So basically you need to redraw the everything on the canvas with the new fillStyle like the following.
var link = document.getElementsByTagName("a")[0],
canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
link.onclick = function(){
draw('rgb(200,0,0)');
}
function draw(val){
context.fillStyle = val;
context.fillRect (0, 0, 608, 105);
var img = new Image();
img.src = 'Round Borders.png';
context.drawImage(img,0,0);
var dataURL = canvas.toDataURL();
document.getElementById("canvasImg").src = dataURL;
}
draw("rgb(0,200,0)");
Just pass the color to draw and it will repaint with the chosen color.