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 calling it or
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 plotting frequency data inside canvas, while many
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 the canvas code, here it is: Now,
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 following, i try to give
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 created 4 functions that could be called by my other java script files. 2 functions to add both these event listeners and
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 computes the transparency with respect to the white background.
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 tail object looks like this: The addPoint function
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 marked. But,