Skip to content

Tag: html5-canvas

Ray Casting floor with HTML canvas

I am coding a small Javascript/ HTML-canvas Wolfenstein style game. I am following Permadi tutorial. For now I did suceed to implement the textured wall raycasting. What I want to do now is to do the floor raycasting. As far as I understand, when I finish to draw a slice of wall, I have to check if it reaches the

Get canvas pixel position from mouse coordinates

I have a 16×16 canvas that is scaled with CSS (width:90%; height: auto;) and I’m attempting to convert mouse coordinates on the canvas to one of the 16×16 pixels. I’m taking it from an onmousemove event, and while I can get the raw screen coordinates, I need to get where it lies on the canvas. Answer Try this: So you

Scrolling issue with Canvas style.left/top

I am making a magnifying glass for a canvas application but ive run into an issue with scrolling. Essentially the goal is to take a canvas and when an image is added (in this case a cgm image) and make a snapshot of it, scale it up and draw it on to a second smaller canvas that overlays it and

Clear canvas by JavaScript

I am using this jQuery plugin to make free drawing over a canvas. I want to clear the canvas for redrawing but after I do and when I click inside canvas for redrawing the old drawing that I cleared appears again Answer This plugin stores all the drawing commands in an actions array, and at each redraw it will go

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? here is