Both squares aren't showing up on the canvas

This is my code: const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); function draw() { context.fillStyle = "rgb(200, 0, 0)"; context.fillRect(50, 50, 0, 0); }; draw(); When I run it, I get no errors but it doesn’t add the squares to the canvas. Can someone tell me why this happens and how to fix it?… Read More Both squares aren't showing up on the canvas

I followed a tutorial, but why does a simple if-statement not work?

I am new to HTML and JS in general so I am currently lost on what I did wrong. I followed a tutorial by Chris Courses on Youtube (link: https://www.youtube.com/watch?v=4q2vvZn5aoo) until 1:27:13. The line of code was: if (player.position.y > canvas.width){ console.log("you lose"); }; It worked perfectly for him, but I am not getting any… Read More I followed a tutorial, but why does a simple if-statement not work?

HTML5 Canvas – Draw triangles in a straight line with a rotation on each following triangle using a loop

I’m trying to draw triangles on 5 different "planes" using a loop. The loop is working and the triangles are being drawn as I want them to. However, the triangles are not drawn in a straight line. They go up and down. let c = document.querySelector("canvas").getContext("2d"); let objects = [2, 4, 6, 8, 10]; for… Read More HTML5 Canvas – Draw triangles in a straight line with a rotation on each following triangle using a loop

Difference in Behavior Between Firefox and Chrome for HTML Canvas fillRect operation

I am working on a bug in a library for Leaflet and I cannot figure out how to work around a difference in how Firefox and Chrome implement HTML Canvas. It revolves around the ctx.fillRect function — it does not appear to be working in Firefox. On Chrome, the application works properly and the labels… Read More Difference in Behavior Between Firefox and Chrome for HTML Canvas fillRect operation

canvas. Unexpected ends of the line

I need to get a picture like this: context.beginPath(); context.moveTo(20, 20); context.lineTo(120, 70); context.lineTo(220, 20); context.lineWidth = 15; context.stroke(); context.fillStyle = ‘aqua’; context.fill(); But as a result, I get this picture: Is it possible to get rid of such unexpected ends of the line? >Solution : In this particular case, you can just clear the… Read More canvas. Unexpected ends of the line

Is it possible to place an element that takes up the full viewport over a canvas without blocking the canvas's ability to interact with the pointer?

I want to overlay a section element that takes up the entire viewport on top of a canvas element. The canvas element is displaying webgl that interacts with the mouse location through javascript. Unfortunately, the section element is blocking the javascript from recognizing the mouse location because it doesn’t come in contact with the canvas.… Read More Is it possible to place an element that takes up the full viewport over a canvas without blocking the canvas's ability to interact with the pointer?