12,263 questions
-1
votes
0
answers
21
views
Simulating a Spinning Wheel with Random Outcome [closed]
I'm developing a baby name picker website where users can spin a virtual wheel displaying various names. I want to achieve a realistic spinning animation and randomly select a name when the wheel ...
0
votes
1
answer
38
views
Why is there a one pixel offset in the canvas?
I'm drawing 16x16 pixel squares on a 64x64 canvas and using CSS to scale them. However, the right corner of the square is misaligned. Can anyone help me figure out why this is happening and how to fix ...
- 37
0
votes
0
answers
19
views
How to make images drawn with canvas 2d pixelated
I have a game where im drawing 16x16 images as 256x256 and other high scales. The problem is that they are blurry. I researched how to fix this, but all the articles say that you should make the ...
- 59
0
votes
0
answers
20
views
How do I get this canvas image to crop exactly? [closed]
The question below was closed for not being focused enough. My question is: How do I crop the initial picture to exactly between the two vertical markers?
The relevant bit of code is likely here (...
- 47
0
votes
0
answers
82
views
HTML5 canvas ellipse draws incorrectly
HTML5 Canvas seems to have an error when drawing an ellipse. Consider this simple example:
For me this occurs in Chrome and Opera, but not Firefox or Safari.
var ctx = document.getElementById("...
- 61
0
votes
0
answers
25
views
FabricJS: TextBox poorly rendered when overloading _renderBackground method
I want to add a box around a Fabric JS TextBox object.
But strange behavior (two vertical lines) occurs when I try to expand and collapse the TextBox along the horizontal axis.
Here is the code and ...
- 3
0
votes
1
answer
44
views
Port shadertoy to GlslCanvas
I'm trying to follow some examples from shadertoy.
I'm using GlslCanvas library from the author of "The Book of Shaders" that I read before but apparently shadertoy uses a bit different ...
- 13
0
votes
3
answers
86
views
How to create a waterfall effect?
I need help to apply the water effect which is fading like the below image. In the image the white particles are fading to blue blurry effect. This is what I am trying to achieve.
I believe with fast ...
0
votes
0
answers
42
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 ...
- 381
2
votes
2
answers
62
views
Which Algorithm Does Chrome/Firefox Use in context.drawImage()?
The specs say:
When scaling up, if the imageSmoothingEnabled attribute is set to false, then the image must be rendered using nearest-neighbor interpolation.
So when imageSmoothingEnabled is false ...
- 33
1
vote
0
answers
19
views
Image cannot be edited after adding to TUI Image Editor
The image cannot be edited after being added to TUI Image Editor. The image is active and moving. There are checkpoints. But they are not active. I forcibly turned them on but to no avail. When ...
1
vote
0
answers
39
views
oscilloscope style - loop getFloatTimeDomainData(timeData) in a circle
I'm doing simple audio visualisations in canvas for fun and found getFloatTimeDomainData(timeData) to deliver the nicest results in direct representation. my example includes a horizontal ...
- 11
0
votes
2
answers
46
views
Using sprite animation to replace Pacman game
I'm fairly new to HTML/CSS/JS programming and could use some help.
I am trying to reverse engineer a Pacman clone originally built with HTML5/CSS3/JQuery. I have been making headway in getting what I ...
- 9
2
votes
1
answer
53
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
1
answer
48
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
-3
votes
1
answer
58
views
Why does touchstart event freeze my program?
I've been working on developing a video game and have recently been working on incorporating touchscreen capabilities into the program. However, I noticed that the touch event tends to cause movement ...
0
votes
0
answers
25
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
29
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
68
views
Best Angular practice for rendering canvas only after images are loaded [closed]
I know Typescript/Javascript pretty well, but am working on my first Angular app. It has a big component (a CAD drafting board) that includes a few canvases. Images are loaded programmatically.
What's ...
- 46.9k
0
votes
0
answers
15
views
Godot cutting off bottom of geometry with webexport
So I've been working on a small project to be hosted on a subdomain so people can access it for a short demo. When I web export and send to the website, there is a weird bug that shows up when it ...
0
votes
0
answers
45
views
Canvas with webgl becomes broken after some time
I have a page where I use multiple canvases with webgl2 context. When I load or refresh page everything works good (rendering in canvases). But if I go to other tab in browser or switch focus to other ...
- 990
1
vote
1
answer
103
views
How to resolve difference in font rendering between Chrome on Windows & Chromium on CentOS via chrome-php? [closed]
I am using chrome-php to render webpages in headless mode on my CentOS server. The webpages load a HTML 5 canvas via fabric.js. The text renders as intended on Chrome in Windows but on CentOS via ...
- 486
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
2
answers
98
views
FabricJS Add Image classList Error - Unable to add an image
I am creating a canvas based tool using FabricJS within a React App. I am using the latest NPM Package 6.4.3 and I am struggling to add an image to the canvas. Very recently they have switched to ...
0
votes
1
answer
142
views
I’m making a maze generator
So I’m making a maze generator, but the entrance locations don’t add up.
Currently, the entrance markers aren’t on the room tiles, so I’m trying to fix that.
Here’s what I made:
const canvas = ...
0
votes
0
answers
16
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
0
answers
63
views
Why can't I apply this specific invert clip to a shape?
I’m trying to apply an invert clip to a shape, but, for this specific clip shape, the clip is not being applied to the shape.
It works if the clip is not inverted, and it works with other clips, such ...
0
votes
1
answer
44
views
how can I set background image in cavas from Fabric?
I would like to upload an image and set it as the html5 canvas background but I am also using FabricJS and my application is built using NUXT.
I am getting the error:
Uncaught TypeError: canvas....
- 83
0
votes
2
answers
87
views
How can I call a custom JavaScript function, to manipulate the HTML5 canvas element, from within the "HTML" section of my Blazor server project?
I have a Blazor server application. On one of my pages I have the standard setup:
MyPage.razor:
@page "/mypage"
<div>
<!-- stuff here ... -->
</div>
@code {
// ...
- 1,969
0
votes
1
answer
57
views
Scale canvas/matrix and all transformations applied, to obtain better quality image in the canvas
A member from stackoferflow helped fix my script and he obtained a good result, but I still need some help.
I have a DIV that contains some other divs and in the end, an image.
This image is bigger in ...
- 255
0
votes
1
answer
83
views
Fill With White, Out Of Bounds Part Of Image - Crop Image With CSS Transformations on it
I have a DIV Container and an image inside of it.
The image has CSS transformations like: translate, rotate, scale
The image can be dragged by a user (and scaled, rotated) in the parent div. Sometimes,...
- 255
0
votes
0
answers
33
views
How to find the mouse coordinates of a text drawn in any transformed space? [duplicate]
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.setTransform(0.75, 0, -0, 0.75, 197.39999389648438, 129 )
ctx.fillText("The quick brown fox jumps over the ...
0
votes
0
answers
13
views
Trying to rotate an image with the javascript canvas [duplicate]
enter image description hereI'm trying to make a rock spawn at a random rotation, for variation, but it is always offset by a certain amount that changes based on the direction, which messes up ...
0
votes
1
answer
44
views
Get Identity Matrix equivalent coordinates of any transformed space coordinates [duplicate]
ctx.setTransform(12,0,0,12,34,23)
ctx.fillText("a",0,0)
Is it possible to get the equivalent coordinates of "a" in identity matrix transformed space.
I want to pin point char "...
0
votes
0
answers
47
views
How to clip curvedText in fabricjs version 5?
I am using the following code to create curvedText object:
fabric.CurvedText=fabric.util.createClass(fabric.Text, fabric.Collection, /** @lends fabric.CurvedText.prototype */ {
/**
* Type of ...
- 486
0
votes
1
answer
70
views
HTML5 Canvas - Rotate Canvas Using Easing Function
Problem:
Easing rotation through HTML5 canvas animation, stopping at the desired angle (or degree of rotation) at the end of the animation. Essentially, stretching this easing animation (smoothly) ...
- 341
0
votes
0
answers
89
views
SignaturePad in React: Signature appears magnified and cropped when switching to mobile simulation mode
Question:
I'm using the signature_pad library in a React JS application to capture user signatures. The signature pad works fine in desktop mode and on actual mobile devices or initial component mount ...
- 57
0
votes
1
answer
87
views
Getting rasterized text in html canvas
I have main canvas on which I draw another canvas which had a text written on it. When I saw the results, it appears that the text is rasterized and not smooth.
Here is the code I tried :-
const ...
- 1
0
votes
0
answers
30
views
Server reconciliation issue with mousemove system
Context
I’m having trouble figuring out exactly how to implement server reconciliation in my game, which uses JavaScript, Node.js, and WebSockets. I’m creating an Agar.io-type game where the player is ...
- 91
0
votes
0
answers
37
views
Put The Chartjs on Canvas using Nextjs
I have the problem when using chart on the image canvas, the issue is that the chart does not show/appear on the image canvas.
const drawCanvas = (canvasWidth, canvasHeight) => {
const dpr = ...
- 3
0
votes
0
answers
35
views
Using chartjs 3.9.4 to draw dynamic chart on the same canvas ID
I am working on an Analysis part of my project and I have two buttons, which each button have different data by clicking them, and I want use jQuery to be loading data to the same canvas ID. This ...
- 1
0
votes
1
answer
56
views
How to pass an event to html tag under canvas?
I'm trying to make a whiteboard in body tag with canvas
but can't pass event to input tag under canvas.
Is it possible to pass a mouse click event to the input tag under canvas tag without change ...
- 3,165
0
votes
2
answers
49
views
HTML canvas: additional stroke after restore
Consider the following piece of code (test it yourself):
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75, ...
- 12.2k
0
votes
2
answers
53
views
Is .strokeStyle of the canvas API a method which makes itself global?
I am curious on the curious behaviour of js, in particular with this method .strokeStyle which usually is used to change the color of a stroke on a HTML canvas. It seems to me quite peculiar, for ...
1
vote
0
answers
56
views
HTML and Javascript: Clock number orbit animation is lagging after 1s [duplicate]
Using HTML/Javascript canvas I have drawn the 12 numbers of the clock face, and I am now making them rotate in a circle, like orbiting planets. The code is silky smooth for about 0.5 seconds with ...
- 13
0
votes
1
answer
56
views
HTML Canvas Arc only drawing outer sliver of circle
I am working on a visualizer to show the area on a graph that is currently being checked for points from a starting points POV, and within a limited FOV. I am trying to show this with canvas arc, ...
0
votes
2
answers
63
views
HTML Canvas, pulse animation from center position
I have created pulse animation using html canvas. There is two rectangles. Rectangle's positions is updated dynamically. The smaller rectangle has pulse animation. I have problem calculate it's center ...
- 5
0
votes
0
answers
23
views
putImageData data doesn't adhere Clipping rule [duplicate]
I am trying to create a Circular QR code using Canvas API.
Here is the link to my codepen 👇
https://codepen.io/owner-photorush/pen/BagdWNm
So my logic is pretty much straight forward.
I take size ...
- 21
0
votes
0
answers
27
views
Accessing/Setting Scale factors in OpenSeadragon
I'm a complete html/css/js newbie and I've been using the demo here https://github.com/altert/OpenSeadragonCanvasOverlay/ as a base for trying out OpenSeadragon. I'm trying to see and manage the scale ...
- 1
0
votes
1
answer
44
views
Dynamically creating a reusable, editable, and savable clipping path with bezierCurveTo() for image masking in canvas
I want to dynamically create, with mouse, savable, reusable and editable bezier curve paths comprising moveable points and handles just like the pen tool allows in Photoshop. I would use these for ...
- 11