CODEWITHSUNDEEP
javascriptcanvas
Jeroen Migneaux
Jeroen Migneaux

Reputation: 11

JS canvas is displaying at the bottom of page

I have this code where I want to use the arrow as my logo in the header. When I implement this code into the header, it renders at the very bottom of the page, no matter what.

I have tried different css classes to just try to move the canvas but nothing seems to work. I also tried to hard code the canvas where i want it to be but does not work like that.

Any help for this newbie, please? :)

Thanks in advance!

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


document.body.appendChild(canvas);
var renderSaveCount = 0; // Counts the number of mouse events that we did not have to render the whole scene

var arrow = {
    x : 40,
    y : 40,
    image : new Image()
};
var mouse = {
    x : null,
    y : null,
    changed : false,
    changeCount : 0,
}


arrow.image.src = 'http://www.jeroenmigneaux.com/Untitled-2.png';

function drawImageLookat(img, x, y, lookx, looky){
     ctx.setTransform(1, 0, 0, 1, x, y);
     ctx.rotate(Math.atan2(looky - y, lookx - x) - Math.PI / 2); // Adjust image 90 degree anti clockwise (PI/2) because the image  is pointing in the wrong direction.
     ctx.drawImage(img, -img.width / 2, -img.height / 2);
     ctx.setTransform(1, 0, 0, 1, 0, 0); // restore default not needed if you use setTransform for other rendering operations
}
function drawCrossHair(x,y,color){
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(x - 10, y);
    ctx.lineTo(x + 10, y);
    ctx.moveTo(x, y - 10);
    ctx.lineTo(x, y + 10);
    ctx.stroke();
}

function mouseEvent(e) {  // get the mouse coordinates relative to the canvas top left
    var bounds = canvas.getBoundingClientRect(); 
    mouse.x = e.pageX - bounds.left;
    mouse.y = e.pageY - bounds.top;
    mouse.cx = e.clientX - bounds.left; // to compare the difference between client and page coordinates
    mouse.cy = e.clienY - bounds.top;
    mouse.changed = true;
    mouse.changeCount += 1;
}
document.addEventListener("mousemove",mouseEvent);
var renderTimeTotal = 0;
var renderCount = 0;
ctx.font = "18px arial";
ctx.lineWidth = 1;
// only render when the DOM is ready to display the mouse position
function update(){
    if(arrow.image.complete && mouse.changed){ // only render when image ready and mouse moved
        var now = performance.now();
        mouse.changed = false; // flag that the mouse coords have been rendered
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // get mouse canvas coordinate correcting for page scroll
        var x = mouse.x - scrollX;
        var y = mouse.y - scrollY;
        drawImageLookat(arrow.image, arrow.x, arrow.y, x ,y);

        // draw mouse event client coordinates on canvas
        drawCrossHair(mouse.cx,mouse.cy,"rgba(255,100,100,0.2)");



    }
    requestAnimationFrame(update);

}
requestAnimationFrame(update);

Upvotes: 1

Views: 1196

Answers (1)

zufrieden
zufrieden

Reputation: 40

I would think, without seeing your actual html, that it’s due to the following:

document.body.appendChild(canvas);

You’re appending the canvas to the body, when you could instead append it to the header element. The body goes all the way to the bottom of the page.

Just for clarity:

document.getElementById('headerId').appendChild(canvas);

Upvotes: 1

Related Questions