Question

I am completely new to HTML5 and have been reading about it for the past few days mainly because I wanted to create a rotating image to put in a <div>. I found a code that does exactly what I want, but it throws the canvas on to the bottom left corner of my page (I’m not sure why, but I think it has something to do with the very first line of the code below). I’m not sure how to adapt the code to a element so that I can put it where I want. From looking at other people’s scripts and trying to emulate them, I know you’re supposed to do this sort of thing to hold the canvas “<canvas width="100" height="100" id="pageCanvas"></canvas>,” but I don’t know how to name the below code in order to do that. I greatly appreciate any help anyone can offer me – thank you so much for reading! 🙂

<script>

    window.addEventListener("load", init); 

    var counter = 0,
        logoImage = new Image(),
        TO_RADIANS = Math.PI/180; 
    logoImage.src = 'IMG URL';
    var canvas = document.createElement('canvas'); 
    canvas.width = 100; 
    canvas.height = 100; 
    var context = canvas.getContext('2d'); 
    document.body.appendChild(canvas); 

    function init(){
        setInterval(loop, 1000/30); 

    }

    function loop() { 
        context.clearRect(0,0,canvas.width, canvas.height); 
        drawRotatedImage(logoImage,100,100,counter); 
        drawRotatedImage(logoImage,300,100,counter+90); 
        drawRotatedImage(logoImage,500,100,counter+180); 
        counter+=2; 

    }


    function drawRotatedImage(image, x, y, angle) { 

        // save the current co-ordinate system 
        // before we screw with it
        context.save(); 

        // move to the middle of where we want to draw our image
        context.translate(x, y);

        // rotate around that point, converting our 
        // angle from degrees to radians 
        context.rotate(angle * TO_RADIANS);

        // draw it up and to the left by half the width
        // and height of the image 
        context.drawImage(image, -(image.width/2), -(image.height/2));

        // and restore the co-ords to how they were when we began
        context.restore(); 
    }
    </script>

Answer 1

Create a canvas element in your HTML code so you can place it exactly where you want (with html + css) :

<canvas id='canvas' height='100' width='100'> Your browser does not support HTML5 canvas </canvas>

And replace this javascript code :

var canvas = document.createElement('canvas'); 
canvas.width = 100; 
canvas.height = 100; 
var context = canvas.getContext('2d'); 
document.body.appendChild(canvas); 

by this one :

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d');