CODEWITHSUNDEEP
javascripthtmlcanvas
user2099810
user2099810

Reputation: 381

Changing canvas image on click

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)

Upvotes: 0

Views: 4306

Answers (1)

markE
markE

Reputation: 105015

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>

Upvotes: 2

Related Questions