Rotating 2 Images On Canvas

March 27, 2023 Post a Comment

I have to draw 3 images on the canvas and need to rotate 2 of the images. The images are like 1. circular with a vertical straight line 2. just an horizontal line 3. Big circular

Solution 1:

As designed, your imageObj2 and imageObj3 will never load.

Here is a generic image loader that will load all your images and store them in an array called imgs[].

When all your images have fully loaded, the render() function will be called. That’s where you start drawing.

// This is an image loader 
// When render() is called, all your images are fully loaded
var imgURLs = [
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
    "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"];
var imgs=[];
var imgCount=0;

pre_load();

function pre_load(){

    for(var i=0;i<imgURLs.length;i++){

        var img=new Image();
        imgs.push(img);
        img.onload=function(){        

            if(++imgCount>=imgs.length){ 
                // images are now fully loaded
                render(); 
            }

        }
        img.src=imgURLs[i];
    }
}

In render(), you just draw your images.

Since the same action (rotating an image) is done repeatedly, you can create a helper function to do the rotated drawing. Here the helper function is drawImageAtAngle.

// draw the rotated lines on the canvas
function render(){

    var x=canvas.width/2;
    var y=canvas.height/2;

    drawImageAtAngle(imgs[0],x,y,-45);
    drawImageAtAngle(imgs[2],x,y,45);
    drawImageAtAngle(imgs[1],x,y,0);
}

Here the helper function that rotates a supplied image to a supplied angle:

function drawImageAtAngle(image,X,Y,degrees){
    var radians=degrees*Math.PI/180;
    var halfWidth=image.width/2;
    var halfHeight=image.height/2;
    ctx.beginPath();
    ctx.save();
    ctx.translate(X,Y);
    ctx.rotate(radians);
    ctx.drawImage(image,-halfWidth,-halfHeight);
    ctx.restore();
}

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/ZShWW/

<!doctype html>
<html>
<head>
<link  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; padding:10px;}
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // This is an image loader 
    // When render() is called, all your images are fully loaded
    var imgURLs = [
        "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
        "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
        "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"];
    var imgs=[];
    var imgCount=0;

    pre_load();

    function pre_load(){

        for(var i=0;i<imgURLs.length;i++){

            var img=new Image();
            imgs.push(img);
            img.onload=function(){        

                if(++imgCount>=imgs.length){ 
                    // images are now fully loaded
                    render(); 
                }

            }
            img.src=imgURLs[i];
        }
    }


    // draw the rotated lines on the canvas
    function render(){

        var x=canvas.width/2;
        var y=canvas.height/2;

        drawImageAtAngle(imgs[0],x,y,-45);
        drawImageAtAngle(imgs[2],x,y,45);
        drawImageAtAngle(imgs[1],x,y,0);
    }


    function drawImageAtAngle(image,X,Y,degrees){
        var radians=degrees*Math.PI/180;
        var halfWidth=image.width/2;
        var halfHeight=image.height/2;
        ctx.beginPath();
        ctx.save();
        ctx.translate(X,Y);
        ctx.rotate(radians);
        ctx.drawImage(image,-halfWidth,-halfHeight);
        ctx.restore();
    }





}); // end $(function(){});
</script>

</head>

<body>
    <p>This is the line image</p>
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png">
    <p>The line image rotated at center of canvas</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Solution 2:

To find the center of the canvas you have to use the dimensions of the canvas. In your code you are using the dimensions of the image. That is, this line:

  context.translate(imageObj.width/2,imageObj.height/2);

should probably be:

  context.translate(canvas.width/2,canvas.height/2);

That moves you to the center of the canvas. The rotation then occurs around that center. You are then drawing the image centered on the origin. That part looks correct.

You will then reverse the rotation and then the translation.

Code Html5

Rotating 2 Images On Canvas

Solution 1:

Solution 2:

Post a Comment for "Rotating 2 Images On Canvas"