36,163
questions
0
votes
0
answers
21
views
How can I record both the screen and webcam using Canvas at 1080p and 30fps?
I tried this and it worked, but the video starts lagging after 30 seconds. No matter what I do, the video records smoothly for 30 seconds and then starts lagging. Am I missing something?
I'm not using ...
- 371
1
vote
1
answer
46
views
Image from a <canvas> toBlob interpolates edges
I am trying to scale a 1x image up to an arbitrary size using a canvas. However, the image always has some interpolation at the edges of each pixel. I expect the image provided to match how the look ...
- 4,814
0
votes
1
answer
61
views
how to draw polygons on image with vue/javascripts
I have an image with boxes and codes on each pox. I send it to Google Vision and get a response.
Then I display the list of buttons for each "product code". On click, it should use "...
- 150
0
votes
0
answers
21
views
Node.js/Sharp: Text not wrapping when compositing SVG text on image
I'm trying to create an image generator that overlays text on background images using Node.js with Sharp and the canvas library. My issue is that the text always renders on a single line, extending ...
- 2,814
-1
votes
0
answers
25
views
How to Build an Interactive Solar PV Planning Tool with Google Maps in React? [closed]
I’m developing a solar PV planning tool in React, where users can select a building from Google Maps and design a layout for PV panels on its rooftop. I’ve experimented with libraries like react-...
0
votes
1
answer
57
views
Struggling to draw SVG onto an offscreen canvas in a web worker
I've been working from zero experience of web workers to now for longer than I'd like to admit and it has me defeated.
I want to move a long task, canvas.toBlob(/* jpeg stuff */) to a worker but ...
- 320
0
votes
0
answers
18
views
Preventing Auto-Clearing in onDraw() When Redrawing Graphs in Android
In Android, I am trying to create graphs, and I am rendering the graph by inheriting the View class and painting it in the onDraw () function using Canvas.
Now at times, the OS itself calls the onDraw(...
- 257
-1
votes
0
answers
28
views
How to Handle CORS Issues with html2Canvas and AWS S3 Images?
I'm facing a CORS policy issue when trying to print a PDF using Angular with html2canvas.
Access to image at 'https://{bucket-name}.s3.amazonaws.com/' from origin 'https://localhost:4200' has been ...
- 47
0
votes
0
answers
30
views
No loader is configured for ".node" files: node_modules/canvas/build/Release/canvas.node
I am encountering an error when attempting to use Canvas in a newly created Angular project with version 18.x.x. I would appreciate any guidance on resolving this issue. The error details are as ...
0
votes
0
answers
98
views
Creating Pattern with jQuery and Repeat into Canvas
I'm working on a pattern placement algorithm for SVGs on canvas and it will be a WordPress plugin. I can place the SVG on the canvas and calculate the width and height values, however, since SVGs have ...
- 27
2
votes
1
answer
45
views
Zooming on Canvas doesn’t work when resizing the canvas and updating scrollbars positions
I’m trying to implement zoom functionality on a canvas element where:
The zoom should be centered on the mouse cursor.
The canvas should scale properly.
The scrollbars should update to reflect the ...
- 477
0
votes
0
answers
33
views
How do I use the mouseup event to control a game in JavaScript?
I'm trying to make a game in HTML5 canvas. For this, I created this control module with this function that adds listeners for keyboard and mouse inputs. However, the mouseup event is not working/...
0
votes
0
answers
13
views
mDrawPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT) is not working
I've created custom drawing view class as per my requirement , in which there is something wrong with eraser whenever I use it every time it draws black lines instead of erasing drawn lines, Here are ...
0
votes
1
answer
22
views
Streaming webcam from mediadevice to videoelement and painting to canvas doesnt work on chromium browsers
Issue
I am using a videoelement that i have created with
document.createlement('video') i have not appended it to the DOM, since i dont want it visible anywhere, i just need it so i can stream my ...
- 515
0
votes
0
answers
19
views
How to properly fit a CanvasTexture on a mesh in Three.js?
I'm working on a project that involves applying a 2D canvas texture onto a mesh of a 3D model (specifically, projecting a canvas that imitates Windows 95 onto the screen of a computer model). My goal ...
0
votes
1
answer
44
views
(Un)zooming a canvas is not precise
When I zoom a canvas, usually multiple times, then unzoom the same number of times, the canvas doesn't unzoom the same. Below are the results of 1 zoom in and 1 out. You see the image never goes back ...
- 1,002
1
vote
2
answers
52
views
TypeError (is not iterable) when adding SVG to FabricJS canvas
I have a fabricjs canvas, and I'm trying to add an SVG to it. But whatever I do, I get problems. It keeps saying:
"Uncaught (in promise) TypeError: t is not iterable".
let svg = `<svg ...
- 4,799
0
votes
1
answer
43
views
QML Dial Label Horizontal align at tickplacement
I have written a qml code to use dial as a selector, which is as follows:
QML
GroupBox {
// color: "#2b6684"
Layout.fillHeight: true
Layout.fillWidth: true
font.pixelSize: 16
...
0
votes
1
answer
30
views
d3 Zoom not synchronised when using a offset with a canvas
I'm trying to create a canvas plot with a zoom and margin so I have space to draw the axis. However I notice that when I add a large left margin e.g. const margin = { top: 20, right: 20, bottom: 40, ...
- 1,262
-1
votes
0
answers
24
views
How can I convert byte array containing image data to Skbitmap to support in all cross platform (Windows,Linux, Mac)
1.Tried Skbitmap.Decode failed.
I need to render the image data into Skbitmap.
I need to read the image byte using bytes index.
How can I get the bit count ?
How can I get the color type?
How can I ...
1
vote
1
answer
53
views
android.graphics.Path in Compose
I try place image behind cutout. And by documentation I can get path of cutout (LocalView.current.view.rootWindowInsets.displayCutout.cutout.cutoutPath)
But this path is android.graphics.Path and ...
0
votes
0
answers
20
views
How to fill a color in hand drawn shape or closed path in rough js?
I am using RoughJs ( docs ) for my whiteboard app. I have done programming the work of tools like - pencil button, undo button, redo button, clear canvas button, color picker, But struggling to ...
- 211
0
votes
0
answers
38
views
Generating an Image URL using html-to-image, canvas, and jsdom not working
I'm trying to generate an image of simple HTML document using SVG's but even this simple example errors out with "Unsupported image type."
I do not want to use puppeteer or any headless ...
- 1
0
votes
1
answer
47
views
Not being able to see the animations being rendered because the function is inside the game loop
I am quite new to game development. In fact, this is the first ever game I am creating. My game is a simple balloon popping game. The problem is I have a pump asset which inflates the balloon on click....
1
vote
1
answer
19
views
TypeError: ctx.toDataURL is not a function by drawing a canvas on the node.js server side
I am creating an capacha based on canvas on the node.js server with typescript.
import { createCanvas, loadImage, registerFont } from 'canvas';
const canvas = createCanvas(100, 40);
const ctx = ...
- 7,945
-1
votes
0
answers
31
views
Canvas Aspect Ratio for Instagram Story - Html2Canvas
I have a project written with React. In this project, the user can share the current screen as a story on instagram. here I first convert the html screen to canvas and then to image and share it that ...
- 59
0
votes
1
answer
151
views
Correct programming pattern to add methods and fields to canvas in javascript [closed]
I would like to create an html canvas class, managed with js, in order to drag & drop Path2Ds, zoom, and translate by drag & drop, so that everything is cleanly done on a class, not an ...
- 1,838
-6
votes
0
answers
32
views
It is possible to create an image with a cropper inside the canvas, and the cropper needs to function correctly to select the area?
I am using htl and js ,It is possible to create an image with a cropper inside the canvas, and the cropper needs to function correctly to select the area.If you have any reference links or suggestions,...
0
votes
0
answers
28
views
change zindex and opacity of objects on canvas
I've made a canvas where objects are created randomly along the x axis of the top of the canvas, and each object has is randomised between 3 different sizes to render.
Depending on the size the object ...
- 654
0
votes
1
answer
59
views
npm command failed while installing canvas
I'm installing canvas on my raspberry pi 5B. But it failed.
Here is what I got:
berryuki@berryuki:~/items/Bot/salt-bot/external/salt-main $ npm i canvas
npm WARN deprecated [email protected]: This ...
- 3
0
votes
0
answers
16
views
Masking a bitmap image createjs
I'm wanting to develop a scratchcard effect by painting lines over a bitmap image and converting the painted lines into a mask. I'm coding in Adobe Animate canvas.
Here's the code that I'm using:
var ...
- 25
0
votes
0
answers
83
views
Next.js 14.2.10 Build Error: "Can't resolve 'canvas'" When Using pdfjs-dist in Client Component
I'm developing a Next.js application (version 14.2.10) and implementing a CV upload feature using the pdfjs-dist library (version 3.11.174). However, during the build process, I encounter the ...
1
vote
1
answer
47
views
Collision of two balls are getting stuck sometimes instead of bouncing off each other in html5 canvas
Balls do bounce, but sometimes they get stuck to each other.
Do tell if you need the rest of the code to solve this query.
This function is used to measure the distance between two balls.
const ...
- 23
0
votes
0
answers
52
views
Android Canvas.drawPoint method draws nothing
I'm doing some work with Canvas.drawPoint(float, float, Paint), but I found a strange thing: this method doesn't work.
At first, I thought it was a problem with my code, so I wrote a simple test code:
...
- 3,237
0
votes
0
answers
20
views
Konva: Using high cache while changing colors causes UI blocking
Due to my work requirements, I need to use high-resolution transformation images. However, I’ve noticed that the conversion process causes significant UI lag. Is there any way to overcome this issue?
...
- 117
0
votes
2
answers
123
views
How to make responsive signature pad?
How to make a signature pad canvas in signature-pad.js work responsively?
My challenge is the following:
I either get the cursor positioning while drawing correctly but lose the input on resize
// OR ...
1
vote
0
answers
56
views
How to extract drawn areas from Bitmap in Android?
I'm working on an Android app using Kotlin where users can draw paths (lines or curves) on images using Canvas. The goal is to extract only painted areas from the original image, while unpainted areas ...
- 33
1
vote
0
answers
61
views
Is there an efficient way of writting to a Flutter canvas/surface or Dart buffer from native C/C++ code?
An older, but developed and maintained C/C++ application draws its own graphical interface (with everything involved). An option to make it cross-platform is using Flutter, with a first focus on ...
- 11
1
vote
0
answers
49
views
Chartjs: chart is blurry when using webworker
I am trying to use chart.js with webworker.
I am able to create the webworker and show the chart on the screen with the right dimensions.
The problem is: the chart is blurry and a bit "zoomed in&...
- 311
0
votes
1
answer
49
views
How to draw a grid in canvas?
I'm trying to draw a grid in flutter canvas with flame framework but really having a hard time. This is my current code that I'm using to draw the grid:
import 'dart:async';
import 'dart:ui';
import '...
- 508
0
votes
0
answers
95
views
How to smooth out the line animation in an HTML5 canvas? [duplicate]
community!
I am working on a project using HTML5 Canvas and JavaScript/jQuery, where I have multiple animated routes between points on a grid. The animation should smoothly draw lines from point A to ...
- 430
0
votes
0
answers
32
views
custom rendered text position not calculated correctly
I'm creating a basic PDF viewer in Vue.js 2 (since the customer does not want to migrate to Vue 3) using PDF.js (latest version of pdfjs-dist).
The loading and rendering of pages is working perfectly ...
- 378
1
vote
2
answers
84
views
Delphi FMX TPathData overlapping vectors
I want to use TPathData to create grid-like forms to then print to a canvas using DrawPath, but I do not want to print directly to the canvas using DrawRect and the like. Here is a simplified example ...
- 37
0
votes
0
answers
41
views
Why is Canvas text thicker than SVG text with the same font size and font family? [duplicate]
I noticed that if I draw the text with the same font size and font family, the text on canvas is thicker than the text on SVG. Does anyone know what causes this and if it can be fixed? Is it possible ...
- 1
-4
votes
1
answer
67
views
How to create a fractal background similar to this one using JavaScript and WebGL/Canvas? [closed]
I'm trying to create a fractal background similar to the one shown in the image (link below). It has an interesting structure, resembling branching fractals with smooth color transitions. I've ...
- 1,578
0
votes
0
answers
13
views
Canvas animation on scroll show rest of website at canvas end
I am using this tutorial to show a animation when the user scrolls. This is working perfectly.
The problem I am facing now, is that I have no clue how to show the rest of the website when someone ...
1
vote
1
answer
70
views
Android : drawing on canvas from another canvas, bad performance
I have a custom view where in onDraw(Canvas canvas), I need to draw on offscreen canvas, then draw the bitmap of offscreen canvas on view's canvas.
Here the code in the view class :
Bitmap bitmap = ...
- 735
0
votes
0
answers
33
views
Canvas content escapes canvas on mobile in Firefox
I am scaling (and translating) an HTML canvas via its CSS transform attribute. This works as expected in most environments, however, in Firefox on a mobile device (Android 14) the content does not fit ...
0
votes
0
answers
27
views
Taking Snapshot on Webcam, then pass it to Canvas
I would like to ask about how to pass the snapshot into the canvas. Whenever I took a Snapshot, the Snapshot is always appear on the bottom of the page. I provide screenshot about the UI.
Webcam ...
2
votes
0
answers
36
views
Issue with javafx text position
I want to draw texts in a javafx canvas, with alignment at the top. For my test, I tried to align my texts at the top of my window. My code works well for strings "a" or "ad", but ...