Quick background: I am writing a browser extension that manipulates video while it’s being played in a browser. The script itself is supposed to be as general purpose as it gets, and it should run on any site that has a video on it. My video manipulations rely on being able to manipulate pixel data from the video. The HTML5-blesed
Tag: canvas
Fabric js – Set Canvas width and height to 100%
I am using the Fabric js 4.3.1 library and would like to be able to adapt the canvas area to its parent div #contCanvasLogo. I’ve made a few attempts but nothing works, the canvas keeps resizing by itself. This is my code but not working: Answer You can set the height and width by retrieving the data from the parent
How to make two canvas with two separate javascript code?
I am using Three.js to develop a cube that translates and rotate in 3D space using data from accelerometer and gyroscope data. So far I have one canvas that shows the accelerometer movement. Now I need to have another canvas that shows the gyroscope data on a separate canvas, I prefer to have two JS code for each canvas, so
how to stop polygons from drawing between two moving circles in javascript
I am trying to make an html canvas game.I currently have a blue player in the middle of the screen that shoots projectiles. when i have two projectiles shot at once, a polygon is drawn between them. this confuses me, I AM using context.clearRect. I have tried using context.clearRect twice and i have also tried using bullets.splice to take the
recording canvas animation playback issue with chromium browsers
If i use the following code to record a canvas animation: The video plays fine and i can seek it in chrome/edge/firefox etc. When i download the video using the following code: The video downloads and plays fine, and the seekbar updates like normal. If i then move the seekbar to any position, as soon as I move it I
How to represent any numbers in chart via canvas?
I want to create line chart via canvas, for data representation on vanilla JavaScript. For example canvas width 600px, height 400px. I have min and max possible numbers on Y axis and numbers between them. X axis represents date. This chart has maximum 1000 and minimum 0 (and numbers between them). I can use this numbers to draw dots in
How to make canvas shape circle?
Hello I want to know how can I make the canvas shape circle in the below code. The code is about moving a object with keyboard keys. I tried to make the circle out of this box but it just disappeared and i am not really sharp. Can some help me make this canvas circle without affecting code. sorry but
How to keep drawing on canvas when scrolling?
I’m wanting to implement canvas as background for my website so users can use their cursors to paint on the webpage like this codepen: https://codepen.io/cocotx/pen/PoGRdxQ?editors=1010 (this is an example code from http://www.dgp.toronto.edu/~clwen/test/canvas-paint-tutorial/) The problem is that the cursor stops painting when I scroll until I move my mouse again. Any idea on how to keep cursor painting even when I
Canvas 2DPath Clip overlap pr
I’m trying to create one compound shape in canvas that masks all the content below it – i will be animating these paths so they will eventually intersect – the problem is, when they intersect, they are doing a reverse mask when the drawing overlaps. I just want one solid mask. Here is an example ( as you can see
Canvas and JavaScript – Flowing word from right to left while waiting for keypress input
I’m new and I am trying to write my first program. In this snippet I try to flow a word from right to left and on the left move a bar to the right and when they collide a life will be taken. I also have a keypress event that strips the word of its corresponding character. The problem is