12,266 questions
-4
votes
2
answers
96
views
Draw a diamond pattern, representing the top face of a cube [closed]
I am trying to produce a multi-colored cube in perspective, a Minecraft logo, on an HTML canvas.
This is part of my code for producing the top face of that cube:
for (let i = 0; i < 16; ++i) {
...
- 17
0
votes
1
answer
48
views
While generating PDF using puppeteer sharp, the content under canvas tag for map is not displaying, instead displaying empty [closed]
I tried using Puppeteer Sharp in headless mode to generate a PDF for a dashboard that contains a map, which uses a <canvas> tag for its content. In the generated PDF, the heading is displayed ...
1
vote
3
answers
127
views
How to get rid of unwanted space between bottom border and canvas on iOS/iPadOS
I have an HTML canvas on iOS/iPadOS devices shows a small gap between the canvas and the bottom border. I've fixed this problem in the past with a div by adding display: block; but that does not work ...
- 218
-1
votes
1
answer
101
views
How to access the actual Google Maps 3D canvas? (Needed for streaming)
I want to get the actual canvas of the Google Maps 3D html element to call a captureStream on it, because I want to stream the footage somewhere.
I am using the google maps beta channel.
Now the ...
2
votes
1
answer
67
views
How to better smooth the fading edges of an arc
I am creating a frame plugin. The arc seems to be drawn okay as shown here:
But if you look carefully, you will notice the wild edges compared to this idle frame:
So, how can I smooth the edges to ...
- 686
1
vote
0
answers
35
views
How to clear lines written on a canvas [duplicate]
I want to clear a canvas. I've found how here on stack overflow: How to clear canvas html5?
var context = ios.getContext("2d");
context.clearRect(0, 0, ios.width, ios.height);
The issue I ...
- 4,809
1
vote
0
answers
64
views
How do I preserve the colors of an image when I lower its overall opacity to almost transparent? (html javascript) [duplicate]
When I convert an image to almost transparent (1% opacity), either by using imageData or globalAlpha, the original color data is lost in the conversion. When I open up the saved image in any image ...
- 11
0
votes
1
answer
57
views
How to prevent path corner antialiasing in HTML Canvas
I'm working with HTML Canvas and have noticed that if I create a path, with let's say a 90 degree angle, that corner isn't drawn correctly; it has antialiasing. See the code below:
<!DOCTYPE html&...
- 1,313
1
vote
1
answer
68
views
Javascript ctx.putImageData at an angle for unknown reason
I am writing a program to generate some orbital images. I decided to use js because I have a fair amount of experience with it and its fast to write for prototypes. The issue is that when I go to use ...
- 175
0
votes
1
answer
77
views
Why can't I draw on HTML canvas [closed]
I'm trying to recreate a classic snake minigame I had made in the past but I've run into an issue with drawing on a canvas using JavaScript.
Why does it not draw a rectangle on the canvas?
First ...
0
votes
0
answers
76
views
How to create a HUD-like overlay in a CesiumJS canvas (non-html)?
I want to draw a HUD overlay to a CesiumJS (webgl) canvas that contains some rapidly changing data (such as current flight speed of an airplane).
I can do that by adding a Cesium Billboard with my ...
- 1,646
0
votes
2
answers
171
views
Extracting The SGF Data From This Webpage
I would like to scrape the problems from these Go (board game) books, and convert them into SGFs, if they aren't in that format already. For now, I would be satisfied with only taking the problems ...
- 7,853
2
votes
2
answers
57
views
Alter image after loading using html canvas
I want to draw a border around an image after it is loaded using new Image()
This works, I see the border, but modifying image.src inside the onload function calls onload again in an infinite loop. ...
- 818
3
votes
1
answer
234
views
How to create a scalloped border around a div containing bg content using CSS
I’m trying to create a 15px yellow scalloped border around generic content divs (e.g. with background photos or videos) for a nonprofit preschool website. Here’s the effect I’m aiming for:
I’m using ...
0
votes
0
answers
57
views
How can I replicate canva.com group functionality in fabric js
For those of you who have worked with Fabric.js, I'm building an editor and I'm trying to replicate the selection and editing behavior that canva.com has — especially how it treats groups and text ...
- 23
-1
votes
1
answer
129
views
How to redraw canvas every time a react state variable changes and then stop it based on a condition using the same state?
I'm new to React and trying to build a component using HTML Canvas that draws very simple simulated water ripples. I have my functions working when I manually click buttons but every time I try to ...
- 133
0
votes
0
answers
59
views
How to I properly spread a spritesheet in JavaScript
I'm trying to create a mini RPG game and have been following instructions, I got my spritesheet from my gaia profile and images 4-8 are looped with leg movement under the avatar with out feet and the ...
- 1
3
votes
0
answers
95
views
Video frames shake/stutter when rendering HTML5 video to Canvas during CSS animation
Full JS from Github
Full css from Github
Full Html from Github
Video frames shake/stutter when rendering HTML5 video to Canvas during CSS animation
I'm experiencing video frame shaking/stuttering in a ...
- 31
0
votes
1
answer
108
views
Disabling Bootstrap event delegation for specific DOM elements
Environment
Bootstrap version: 5.3.3
Browser: Chrome (latest)
Framework: Vue.js 3 with Phaser 3.87.0
Problem Description
I'm developing a game using Phaser 3 within a Vue.js application that uses ...
- 39
0
votes
0
answers
91
views
How can I get a text outline effect on the web?
I am making a web app and want to get this kind of outline effect dynamically.
I don't quite know how to describe it properly, but the outlines and the insides of the text are colored in.
My initial ...
- 1,038
0
votes
0
answers
52
views
implement release_link_on_empty_shows_menu using the LiteGraph.js ComfyUI fork
LiteGraph.js fork from https://github.com/Comfy-Org/litegraph.js has a typescript interface which is nice, I'm trying to implement my own app using this fork,
I'm having problem detecting when a user ...
- 32.4k
1
vote
1
answer
71
views
setTransform visually incorrect for a reflected image (translated/rotated/scaled), but matrixTransform applied to the original coordinates works
My vanilla JS program has two canvases. The user draws arbitrary straight lines on an image on the first canvas, and pieces taken from splitting the canvas by the line are drawn on the second canvas, ...
- 171
0
votes
1
answer
67
views
Image edge transparency when using `drawImage` in combination with `setTransform`
I'd like to draw a red rectangle and an image on a HTML canvas. My goal is to completely cover the rectangle with the image, in combination with scaling all content using setTransform so the image ...
- 393
1
vote
1
answer
58
views
How to disable audio when routing/component is not used anymore?
I am new to Angular and I am building a portfolio site where I showcase my projects.
The problem is, that one project is a canvas game with audio.
When I switch the routing to back to '', the audio is ...
- 11
3
votes
1
answer
91
views
Ambiguous information about WebGL clip space
I am reading about WebGL clip space, I think it basically should mean the same thing as coordinate system. The same site specifies ambiguous, information.
In WebGL basics is specified left hand system,...
- 2,417
0
votes
2
answers
87
views
Final composition of WebGLRenderingContext and CanvasRenderingContext2D inside the browser window
I have two transparent <canvas> elements, a regular 2d and a webgl and both are filled with the same semi-transparent color e.g. 0x00008080.
Now what finally is composited inside the browser ...
- 13k
0
votes
0
answers
52
views
HTML5 Canvas (with multiple SVG files drawn to the canvas) to PNG is not displaying the SVG files; however PNG is not entirely blank? [duplicate]
I'm working on a project that draws repeatedly to an HTML Canvas using a combination of the lineTo and drawImage methods. As far as I can tell, the actual production of the Canvas works as intended. (...
- 1
1
vote
2
answers
115
views
How to use a relative coordinate system in HTML canvas?
I am used to working with SVGs. When you create a SVG element in a webpage, you can specify its viewbox by stating the minimum X,Y coordinate and the maximum X,Y coordinate. Eg: (0 0 100 100)
That ...
2
votes
2
answers
80
views
Multiple frame animation in HTML canvas
I've been trying to find an answer for a while but most searches return results for animating shapes not frame animation. Given a canvas with a 2d context to which I draw sprites with drawImage, what'...
- 1,181
1
vote
2
answers
108
views
Can you make semi-transparent pixels opaque without knowing their coords?
My goal is to turn any pixel with any alpha > 0 to have alpha = 1.
Say I have this blank canvas with a gradient background:
And I draw a white (#fff) square on it:
And then I color that square ...
user29889977
0
votes
1
answer
59
views
How to draw an monochrome image to a Context2d with specific color?
Say I have an image that I can pass to ctx.drawImage(...) and it's all one color (e.g. #fff). Is it possible to draw this image as another color (say #f00) without rebuilding the image via ...
user29889977
1
vote
1
answer
110
views
Optimizing transparent video method
Video
Hello, I've been trying to render this video on my site with a transparent background. After some research I managed to stumble upon this resource which let me get my desired effect using a ...
- 125
0
votes
2
answers
99
views
javascript range slider with steps in html5 canvas
I'm trying to make a slider in javascript with canvas. The moveSlider() function is called by 'pointermove' eventlistener, and it changes the X coordinate of a rectangle stored in 'Slider' object in ...
- 43
0
votes
1
answer
55
views
Simultaneous Canvas - Ball Disappears in First Canvas
So, I have this situation where I need to change 2 or more canvas at the same time.
In my code, I generate the canvas by code and modify it. It is a very extense code, so I'll simplify it:
let ...
-1
votes
1
answer
61
views
Text shrinking problem on 3d model through shader and canvas
Hello currently i am developing a configurator but have some issues with texts. I am trying to render text on off canvas on 3d model through shaders but its acting weird. i can not set width and ...
- 37
2
votes
1
answer
73
views
VueJS race condition calling a child's function after setting its props
UPDATE
This was solved using nextTick() as proposed by @Estus Flask.
import { ref, useTemplateRef, nextTick } from 'vue'
...
const handleClick = () => {
color.value = 'blue'
size.value = 50
...
- 23
1
vote
1
answer
95
views
Visible grey edges inside Html-canvas
Hello i am trying to export a uvmap for a model and i am filling triangles(meshes) with color, it works but i always see grey mesh lines. i tried to draw lines if i draw the lines with different color ...
- 37
3
votes
1
answer
115
views
How to generate bezier curve control points based on a pattern in javascript?
As requested in the comments, I have made a simpler example that focuses on the question. That being how to correctly calculate the two control points for a bezier curve that follows the pattern ...
- 175
0
votes
0
answers
57
views
How to calculate matrix transform for Canvas from polar coordinates
I have an image in 3d space of which I know some coordinates.
I'd like to use the HTML canvas to re-draw the image into a picture of set width and height.
For example when using this image:
I know ...
- 316
-1
votes
1
answer
79
views
In Konva, how to convert line with certain width to shape
Using Konva (konva-react), i render line using this component:
const renderLine = (pathProps: CanvasPath | ActivePath, key?: number) => (
<Line
key={key}
points={pathProps....
- 954
2
votes
3
answers
208
views
How to transform the canvas objects while keeping opposite side fixed?
So my idea is to make some simple canvas editor.
My current problem is I can't resize my object properly.
Currently it's being resized from it's center and not from the edge I'm dragging.
Here's what ...
- 131
-2
votes
1
answer
50
views
Javascript Canvas Download Clashing
I'm working on a way to download two different sized versions of the picture using a canvas to repeat an image in its background.
It works when i tested just a single download option, but it doesn't ...
- 1
1
vote
1
answer
70
views
Pixel image blurs on rotation, JS Canvas
When drawing an image with rotation on a JS canvas the image is blurring. See attached images.
Blurred, with rotation:
No blur, not rotated:
I have set imageSmoothingEnabled to false and image-...
user29574732
0
votes
0
answers
28
views
Canva scroll and descroll on cursor position as origin
I struggle for a few days on this issue. I have a video editing timeline in a canva as you can see : [](The numbers are the frame's number of the video)
I can zoom in and out in this timeline and ...
- 11
3
votes
2
answers
178
views
How can I optimize my full-screen rain animation to balance GPU/CPU load and maintain control?
I'm developing a full-screen rain animation using HTML, CSS, and JavaScript. I use a single <canvas> element with a requestAnimationFrame loop to animate 500 raindrops. Despite this, my GPU ...
2
votes
0
answers
116
views
html canvas renders long streaks in image
The HTML <canvas> consistently adds streak artifacts when it tries to render images with a width considerably longer than its height.
In my case, I am using a JPEG image whose dimensions are 42,...
- 21
0
votes
1
answer
50
views
Any idea how to make canvas ctx.restore() to work here? [duplicate]
Using HTML canvas to draw circles onto rectangle with each "touchmove" event.
Expecting to see the last circle only because using ctx.restore() and also previosly ctx.save() the initial ...
- 37
-2
votes
2
answers
97
views
Unable to render the image on canvas
I am trying to create a simple game using JavaScript. I do JavaScript as a hobby, and I did not major in computer. I used ChatGPT's help to write my code, so it might be unnecessarily large and messy.
...
- 1
1
vote
3
answers
60
views
how to I find the Right most value in a linear matrix?
this is JavaScript in HTML using 2d context
If I have a linear matrix, how do I find the right most value?
Currently I'm guessing my way around Wave function collapse and I need to add boundaries
when ...
- 11
0
votes
2
answers
53
views
Stroke canvas elements as if they're one element
I have a canvas with multiple circles and want to stroke them as if they are 1.
as you can see, it is all drawn on their own
context.beginPath();
context.fillStyle = "#F9F8F3";
context....
- 13