12,266 questions
7
votes
1
answer
2k
views
How do I use ResizeObserver with requestAnimationFrame correctly
Many examples show using ResizeObserver something like this
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
function draw() {
const { width, height } = ...
user128511
1
vote
1
answer
93
views
i'm trying one of those on scroll canvas image animation but the last image at the bottom on the page doesn't show up
I did an animation on scroll with jpeg images that cover the whole page and it works quite well for the most part but when i reach the bottom of the page, the last image doesn't show up.
Chat-gpt was ...
0
votes
1
answer
98
views
How come ctx.resetTransform() doesn't work when a very specific thing happens? It gives no errors too
I am programming an OOP 2d canvas game, and I am seeing some weird behaviour with my code. When inside "e", the workspace, there is two or more of the same object but nothing else, ctx....
1
vote
1
answer
86
views
Unintentional outline around canvas triangles [duplicate]
I am making a 3d engine, and noticed an outline around every shape that is drawn. I've tried a few ways to get rid of this, like image-rendering: pixelated; in the css for the canvas, ctx....
- 11
0
votes
0
answers
60
views
Canvas: fillRect x-coordinate jitter when drawn quickly
I am creating a waterfall-style spectrogram that moves vertically as live radio data is received. I am attempting to migrate to a more efficient method of drawing the color graph; by collecting ...
- 1,511
1
vote
1
answer
231
views
Moving an HTML Image across an HTML Canvas
I am trying to make all my images in my HTML canvas draggable by the click of a mouse. I have read/watched every question and tutorial I can find 3-4 times over now, and can not figure out why my code ...
- 25
1
vote
1
answer
138
views
Recolour all pixels of a specific colour in an image overlay in Leaflet
I have an image approximately 8000x4000 pixels. This image is broken up into blobs of colour.
Here is an example of part of the image to show what it looks like:
I'm able to plot the image using ...
- 870
0
votes
0
answers
120
views
Memory leak with web worker + canvas
I am attempting to migrate some of the drawing logic for a waterfall spectrum graph to a web worker because it was causing jitter with other, less graphics-intense graphs on the page. In the new model,...
- 1,511
1
vote
1
answer
108
views
Want to load images/ video on canvas for my React project, Images are working but not the video
I am trying to upload images/ videos on Canvas. When the user uploads an image, it will display on canvas; if the user uploads a video, it will display on the canvas. I can display the image on Canvas ...
- 119
1
vote
1
answer
112
views
Implementing a gradient background in in the latest chart.js?
This question has an implementation and I'm trying to transfer it to this demo using the latest version of chart.js, however the gradient settings are not taking effect.
Any ideas?
This is the entire ...
- 48.2k
0
votes
1
answer
24
views
Can a js function calling several html canvas draw and drawImage methods be saved into a single Image object?
Can a js function calling several html canvas draw and drawImage methods be saved into a single Image object?
Been searching for a way to do this. I was thinking about utilizing the html canvas clip() ...
- 28
0
votes
1
answer
134
views
What is the best practice when typing Template Refs in Vue3 with Composition API? [closed]
I have started working on a project and decided to use Vue3 with the Composition API and Typescript. The first step in my project is to render a football field on the screen and I am doing this using ...
3
votes
1
answer
482
views
Calculating point coordinates on a line in chartjs?
In this draggable ChartJS demo is it possible to derive a set of interpolated coordinates along one of the curves that ChartJS plots?
var options = {
type: 'line',
data: {
...
- 48.2k
2
votes
2
answers
337
views
Create URL to unloaded mock-image in browser to simulate actual loading
In short, I would like to create a lazy-loaded-mock-image-src-url in browser. This is in order to simulate the loading of an image, to see how it loads.
Here is how I would like the flow to work, all ...
- 614
1
vote
2
answers
62
views
How can I stop my number of balls being added in my HTML canvas exponentially?
I currently have a code that when the user clicks on addBall(), a new ball is created on a canvas and they bounce around. However, when the user clicks this button more and more, the number of balls ...
- 133
1
vote
1
answer
47
views
Connecting an <a> element to draw an image in a HTML canvas
I am trying to use a dropdown button list to display different images in a HTML canvas. I have the href set to utilize javascript and the img and script down by the canvas, yet when you click on the ...
- 25
0
votes
1
answer
618
views
How to convert pptx file (content of xml or json) to fabric js canvas objects?
I am trying to make an online editing tools like Canva. I would like to render the same contents of a power point slide on fabric js canvas for editing (like it does on Canva, uploading power point ...
- 1,008
0
votes
1
answer
57
views
How can I stop my balls from being moved to random places when I add new bouncy balls in an HTML canvas?
I currently have a program that when you hit an "Add Ball" button, a new ball gets created and they bounce off the walls and other balls. However, let's say you already have two other balls ...
- 133
0
votes
1
answer
31
views
Why canvas inside div has a vertical offset? [duplicate]
Why canvas inside div has a vertical offset?
The web inspector does not show any margin or padding for div and canvas.
.outer {
height: 100px;
width: 200px;
border: 1px solid;
}
.inner {
...
0
votes
0
answers
292
views
Detect pen pointerType and pen buttons (compatibility browser and OS)
I want to build a simple website that detects a pen (stylus) so that the user can handwrite on a canvas (see the code snippet below). I also want to detect the buttons that are pressed on the stylus ...
- 565
1
vote
2
answers
280
views
event blur in canvas html5
I´m trying to add an EventListener to my canvas when I lose focus in this canvas.
I have two canvases:
In the first canvas (at left), I draw a signature, and when change focus to the right canvas, I ...
- 343
0
votes
1
answer
106
views
How to copy a canvas present on one webpage to another
I am attempting to get a canvas from a webpage and display it elsewhere.
The canvas itself is not obtainable through an url, I get the webpage and grab the canvas from there.
That being said, when ...
0
votes
0
answers
41
views
Redraw function on canvas html5 element, endlessly execute
im trying to achieve a click functionality that triggers a "active"- state for one of my svg buildings on my canvas element, this worked before with the same code before i put the for-loop ...
- 1
1
vote
2
answers
247
views
Draw a vertical arrow using canvas 2d
I am trying to draw a vertical arrow using canvas and javascript. i am able to draw one with arrow head upwards but finding difficulty in placing arrow head at the bottom.
The code i am trying
<!...
- 67
0
votes
1
answer
85
views
how to manipulate colors to quickly update many dots on html canvas [closed]
I wrote a simulation. There's an animation component.
There are approximately 4 million coordinates.
Every coordinate is reported in a text file, text1.txt.
Every coordinate either changes or is ...
- 3
0
votes
2
answers
506
views
Implementing Infinite Grid Dots in Vue Canvas with Panning System
I'm currently working on adding a panning system to the canvas in my Vue app. While I've successfully implemented the panning system, I'm facing challenges rendering an infinite grid of dots ...
- 103
0
votes
0
answers
54
views
Is there any way to make canvas arc method behaves same in Firefox & Chrome?
When you try to draw circle in canvas with lineWidth greater than the radius, it leaves blank space between the filled region and the stroke in chrome. In Firefox & Chromium, the stroke covers the ...
- 3,430
0
votes
1
answer
118
views
How to read pixel values of an ImageOverlay in React-Leaflet by mousemove event?
I am trying to read pixel values of an ImageOverlay in React-Leaflet on every mousemove event. I want to use the canvas API to read pixel values and display the RGB value in a sticky tooltip. Can ...
0
votes
0
answers
105
views
D3 + canvas - inconsistent stroke width
I recently switched from SVG to canvas in my D3 line chart for performance reasons. However, I am encountering an issue when drawing the line:
As you can see, the vertical lines are much thicker than ...
- 1,511
0
votes
0
answers
21
views
In the context of making an electronic signature, how do I clear my canvas element? [duplicate]
I'm building a react component that will essentially serve as a method to sign documents, with an option to draw, or type your signature.
I have a minimal reproduction of my work found here
My code ...
- 2,966
1
vote
0
answers
348
views
Custom build eraser brush in fabric js
How to use Custom build in reactjs?
I want to include eraser brush of fabric JS due to which I need to have the custom build as EraserBrush is not present in default build.
I have downloaded the ...
- 11
0
votes
0
answers
122
views
Implementing scrolling on an infinite grid for Conways game of life using HTML Canvas
I've set up an 'infinite' grid for Conway's Game of Life using a Set object to store only the coordinates of active cells. I've implemented scrolling by applying a fixed offset to the X and Y ...
- 1
-1
votes
2
answers
420
views
how to disable antialiasing for webgpu
Object literal may only specify known properties, and 'antialiasing' does not exist in type 'GPUCanvasConfiguration'.ts(2353)
But then how do I disable anti aliasing?
- 2,029
0
votes
1
answer
47
views
How can I get a dynamic canvas element to sit behind other content within an offset div?
I'm using granim.js to generate a dynamically moving gradient in a canvas. I'd like to have it be the background content for a div element. Because granim.js generates content dynamically, using ...
- 29
1
vote
2
answers
73
views
`requestAnimationFrame` animation appears to lose frames while drawing time code to a javascript canvas
My requestAnimationFrame animation appears to lose frames while drawing time code to a javascript canvas. The time code shows a sequence of 31 graphic states each lasting 24 seconds and I am trying to ...
- 1,852
1
vote
1
answer
240
views
Draw image on canvas from image data stored in database
I am creating a persistent whiteboard app using HTML and JS, where the user draws on the canvas and clicks save, which stores the canvas image data to a MySQL DB. When the page reloads, the canvas ...
- 11
0
votes
1
answer
98
views
Line Endings in JS Canvas Arc Function bug in Firefox
Tiny but mean: I want to draw half a circle with an outline in an JS Canvas in Firefox. Somehow, the line endings of the stroke do not what they should, that would be for my understanding a solid half ...
- 205
0
votes
1
answer
39
views
Cannot make two objects in same time in Javascript. One object hides another one
I want to create a symbol using javascript. It needs to create circle and rectangle. I created circle and rectangle. But when rectangle make under the circle, then circle not display. How fix this ...
4
votes
3
answers
527
views
Fit Text to Circle (With Scaling) in HTML Canvas, while Typing, with React
I'm trying to have text fit a circle while typing, something like this:
I've tried following Mike Bostock's Fit Text to Circle tutorial, but failed so far, here's my pitiful attempt:
import React, { ...
- 7,853
1
vote
0
answers
160
views
Create a canvas with layer management
I want to integrate a fully working canvas in my Next.js application with the feature to add layers over the canvas such that each layer can have it's own strokes (made by the user) and images (...
- 85
1
vote
2
answers
168
views
Position in x,y of the endpoint of a circle/arc
I am trying to draw lines in a circle like the spokes of a wheel. I am getting stuck because I do not know how to get the coordinates from the end point of the circle. It all works well as long as I ...
- 690
0
votes
0
answers
18
views
Wrong top left coordinates when drawing rectangle in html canvas [duplicate]
I am developing an web app and in this page, the user could draw a rectangle once a button is clicked. However, when you click a button and you draw the rectangle, the top left coordinates of the ...
- 31
1
vote
1
answer
446
views
Fabric.js image manipulation using control handler, when an image is cropped and scaled, then next crop operation doesn't applied to previous state
In the given fabricjs code, I am developing a cropping and scaling function using image control handler. When image is scaled for first time and then cropped, in this case it is working fine. Then ...
- 695
0
votes
0
answers
57
views
Need help showing animation on canvas without reloading image at every interval (React)
EDIT: This is how I managed to make it work. I realized I had to create the image object inside the initial useEffect hook to prevent it from being reloaded at every re-render, and refer to it later ...
0
votes
1
answer
90
views
Drawing a timed-cycle in a canvas
I have this code below which should draw cycle based on a timer. It, however, starts and draws the cycle in 3 simultaneous parts. I can't figure out why and how to get it to draw one smooth cycle:
...
- 1,124
4
votes
1
answer
154
views
Why must I add velocity to object.position.y + object.height?
There nothing wrong with my code really. I was watching a tutorial to help me learn to make games in canvas.
I’ve understood every single bit of it, but the one thing I don’t understand is why must I ...
2
votes
2
answers
221
views
Why is my JS-program behaving differently with/without a 'problem line'?
The problem line is in the handleLineEnd function.
I ripped off all the lines not necessary to show the problem.
Without the line: I can draw multiple rectangles on the ctx.
With the line: Each ...
0
votes
0
answers
84
views
Why does an arrow disappear at some angles in HTML Canvas when I use lineJoin = "round"?
I am facing a weird bug in HTML Canvas. I want to draw an arrow but it disappears when I add ctx.lineJoin = "round" for some coordinates. Here is the MCVE:
const canvas = document....
- 605
0
votes
1
answer
78
views
center image in canvas html
I'm trying to center an svg image in canvas, however the image goes to the right bottom corner, I couldn't understand what I'm doing wrong.
notice: the image is an svg image, I tried a png image it ...
- 73
2
votes
1
answer
101
views
2D HTML5 Canvas Game: Specific width/height restricts player movement (No collision implemented)
Q: Why is movement restricted in these directions depending on the canvas' width/height + player position, and how do I fix this?
As mentioned in the title I have been building a 2D canvas game (a top-...
- 23