Changing canvas image on click

Question

I'm trying to build a sort of generator which lets you put text over an image. Now it's all working great, but i'm trying to create some thumbnails which let me change the background image of the canvas.

Now this is my first attempt with a canvas and i've tried alot of things, but the closest i've come and where i thought my little piece of code would work was, it's given me 0 errors:

function testbackgroundchange() {
        img.src = "background_1.jpg";
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        document.getElementById('scale').value = 1;
        document.getElementById('rotate').value = 0;
        x = canvas.width/2 - img.width/2;
        y = canvas.height/2 - img.height/2;
        ctx.drawImage(img,x,y);
        imgTransform();
}

So what i'm trying to here is onclick of a thumbnail, change the background image of the canvas. I've added an JSFiddle for better understanding of the problem: http://jsfiddle.net/29M7P/1/

If anyone could point me in the right direction that would be great. (sorry i'm a beginner)

markE · Accepted Answer · 2014-04-03 21:33:38Z

You can listen for clicks on your thumbnails with thumbnail.onclick

img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};

And you can change the canvas image like this:

function changeImage(img){
    ctx.clearRect(0,0,cw,ch);
    ctx.drawImage(img,0,0);
}

A Demo: http://jsfiddle.net/m1erickson/88n3K/

Code example:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;

    var imgCount=2;
    var img1=new Image();img1.crossOrigin="anonymous";img1.onload=start;img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
    var img2=new Image();img1.crossOrigin="anonymous";img2.onload=start;img2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg";

    function start(){
        if(--imgCount>0){return;}

        document.body.appendChild(img1);
        document.body.appendChild(img2);

        img1.onclick=function(){changeImage(this);};
        img2.onclick=function(){changeImage(this);};

    }

    function changeImage(img){
        ctx.clearRect(0,0,cw,ch);
        ctx.drawImage(img,0,0);
    }


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <h4>Click on an image below to drawImage to canvas</h4><br>
</body>
</html>

Collectives™ on Stack Overflow

Changing canvas image on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related