Позиционирование элемента холста HTML5

Question

Я совершенно не знаком с HTML5 и читал об этом за последние несколько дней, главным образом потому, что хотел создать вращающееся изображение, чтобы положить <div>. Я нашел код, который делает именно то, что я хочу, но он бросает холст в нижний левый угол моей страницы (я не уверен, почему, но я думаю, что это имеет какое-то отношение к самой первой строке кода ниже). Я не уверен, как адаптировать код к элементу, чтобы я мог его поместить туда, где хочу. От взгляда на скрипты других людей и попытки имитировать их, я знаю, что вы должны делать такие вещи, чтобы держать холст «<canvas width="100" height="100" id="pageCanvas"></canvas>», но я не знаю, как назвать приведенный ниже код, чтобы сделать это. Я очень ценю любую помощь, которую любой может мне предложить - большое вам спасибо за чтение! :)

<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

Создать брезентовый элемент в вашем HTML-коде, так что вы можете поместить его именно там, где вы хотите (с HTML + CSS):

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

И заменить этот яваскрипт код:

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

по этому:

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