Why are there scroll bars despite fitting a canvas exactly to the screen

I have a page with exactly one visible element: a canvas. I am setting the canvas’ width & height to be exactly the width and height of the window (window.innerWidth and window.innerHeight), however horizontal and vertical scroll bars still appear and allow me to scroll around a very small amount. None of my elements have … Read more

Why my for loop is not drawing multiple repeated shapes in the html canvas sketch?

<html> <body> <canvas width = "1200" height = "1200"> </canvas> <script> let canvas = document.querySelector('canvas'); let context = canvas.getContext('2d'); context.fillStyle = '#5bd75b'; context.fillRect(0, 0, 1200, 1200); let radius = 500; for (let i = 1; i <= 10; i++) { if (Math.random() >= 0.5) { context.fillStyle = 'yellow'; } else { context.fillStyle = 'red'; } … Read more

Drawing is zoomed in canvas HTML/JavaScript

Currently I’m trying to draw on canvas… But the problem is that drawing is zoomed in. Basically beginPath is not following the cursor. This happened when I changed canvas width and height in css. Before that, size was specified in canvas tag without any pixel values. But in css I have vh and % values. Is there any way to make it act normal again. Here’s my html code:

beginPath and ctx.arc in HTML/JavaScript

I’m trying to make drawing board. I’m using ctx.beginPath() and to smooth out the edges I added ctx.arc() and ctx.fill(). But the problem is that if I move mouse too quickly it’s not drawing continues line. It draws circles with spaces between them. The greater speed of the mouse, the greater are the spaces between circles. Here’s my JS code:

Scratch off reveal with HTML5 canvas — Add fade out element

I’ve followed this tutorial to create a “draw to reveal” effect on my website: http://thenewcode.com/1120/Scratch-Off-Reveal-with-HTML5-Canvas. I’d like the ‘front’ image to be this video asset, and I’d also like the “revealed” path (or each dot drawn) to fade out after a set time after it is drawn (like a fading trail behind the mouse), but could not figure out how to do it. I’ve tried re-drawing the img after each drawDot() call, but that seems to just draw the entire “revealed” image. Thanks!

HTML canvas not producing image from web cam

I want to capture image every time socket.on(‘takePic’) gets triggered. It works fine for the first time. but when the socket.on(‘takePic’) gets triggered second time,the canvas div is just blank and so the img tag.
I have copied the takePicture() function from somewhere and added the setInterval() and localstream variable to stop camera.
how can I fix this?