I assume the answer is “no” from my testing but I thought I’d make sure. I’m trying to draw / copy the contents from a WebGL canvas to a 2d canvas every frame and I want to know if I should wait until the WebGL context is finished drawing (which I can use gl.fenceSync to check) before …
Tag: canvas
Web Audio API is not working properly, in google chrome browser
I’ve created a simple music player, which creates a bufferArray for a particular audio URL to play the music. It is working fine in many of my cellphone’s browser, so I guess there is no cross origin issue for audio URL. however chrome is not playing audio. Also I’ve created a Uint8Array for…
Stencil js – requestAnimationFrame does not occure in all components
I created a simple catalog item component using stencil.js. In the component there is canvas tag that on it I painted animating curved lines. At the componentDidLoad function, I define the canvas, initialize it and call the animate function. This is the code of the component itself: As you can see, I import t…
Radius Line Appears on Moving Arc
I was trying to create these shapes moving, the shape is made up of a semicircle and a symmetric upper arc & lower arc. They should be just the shape in front but now there are line like a tail dragging behind when they move. The output shape with unknown tail It seems like these lines are from the moveTo
Bullets curving when player gets near
Is ther a way to make the bullets go in a straight line when the player gets near det bullet. Because when i move the player near the bullet the bullet curves. And if possible is ther a way that i can implement the particles code. I tried to remove the update function but that doesn’t seem to work. Do
P5 try to factorize Graphics and Canvas code
I want to factorize code for drawing same thing in a graphics or in the standard canvas. ( In my real program, i want to have autonomous class that draw themselves in some context given at construction time ) I cannot find some equivalent from canvas that can match graphics instructions except line. In the fo…
Calling .addEventListener(); inside a function fails to actually create said event listener
I’ve been using the line canvas.addEventListener(“click”, funcName, false); without issue for my program, but recently I decided that I would sometimes like to remove said event listener and replace it with another one canvas.addEventListener(“click”, difFuncName, false); so I cr…
How to put overlapping images on html5 canvas?
I want to make a cool visualization where I would overlap lots of semi-transparent images on my canvas. For this, I decided to use context.putImageData() because these images are stored as arrays. The problem is that this method disregards the actual background of the canvas with the already drawn images and …
Create a “tail” for an object that is orbiting
Edit Here is a JSFiddle with the code for the “tail” function commenting out.Solar System JSFiddle I have this object I am working on that has an object orbiting a center mass. That works perfectly. I am now trying to add a trailing line or “tail” that follows behind the planet. My tai…
D3 / Canvas: Axis not displayed
i have the following issue: I want to create a simple chart using the d3 library and the canvas rendering. I don’t see anything in my browser – but, if I inspect the element, the Axis is ‘compiled’ in the code and I can hover over every tick in the code while the position in the DOM is…