Home/ Questions/Q 8103187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T23:28:10+00:00

I have some html5 canvas code to make an image, the current fillstyle is

  • 0

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.org/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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working 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.

    ​

    • 0