Questions tagged [html5-canvas]
Canvas is an HTML element that allows for dynamic, scriptable rendering of 2D shapes, 3D shapes, bitmap images and animations in both 2D and 3D.
12,195
questions
0
votes
0
answers
6
views
Wrong top left coordinates when drawing rectangle in html canvas
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 ...
1
vote
0
answers
43
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 ...
-3
votes
0
answers
16
views
Is there any tag in html5 to drop-down button? [closed]
QUESTION ABOUT HTML TAG,STUDENT SHOULD KNOWN ABOUT THE TAG.
TRYING TO TECH STUDENTS ABOUT HTML TAG.
THE PURPOSE TO ASK THIS QUESTION TO TEACH STUDENTS ABOUT THE HTML5 AND EXPACTING THAT STUDENT WILL ...
0
votes
0
answers
17
views
How to scale canvas without blurry edges?
I'm attempting to make a sprite editor using Svelte and I'm able to get basic pixel drawing done, it just looks slightly blurry around the edges and I can't seem to figure out why.
<script lang=&...
0
votes
0
answers
23
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
0
answers
15
views
Canvas redraw does not happen after leaving and returning to a page view
I am creating ticket qrcodes on the fly and attaching them to an ng-repeat in a modal when a user clicks a button to open the modal. It works. If the modal stays open, then every 5 minutes the ...
0
votes
1
answer
34
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:
...
4
votes
1
answer
44
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
143
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
54
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....
0
votes
2
answers
39
views
How to avoid stretching images inside html5 canvas [closed]
The canvas takes up all the available space on the screen, I use it to render the background of the site.
canvas {
position: absolute;
width:100%;
height:...
-1
votes
0
answers
33
views
iOS 17: changing contrast and darkness of canvas content - is this a bug? [closed]
I appologize beforehand as it is not a detailed question, but more of a general inquiry. The goal of this question is to find out whether this is an actual bug in iOS 17 and if so, where to best ...
0
votes
1
answer
45
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 ...
0
votes
0
answers
23
views
How to Detect and Handle Collisions Between a Ball and Curved Paddle in JavaScript Canvas?
I'm working on a JavaScript canvas project to simulate a pinball game. I've reached the point where I need to implement collision detection between the ball (a circle) and the flippers (curved paddles)...
-1
votes
0
answers
17
views
In paperjs using scale property of CSS to make canvas responsive but then I am not able to drag item inside of canvas
I am using scale property of CSS but that is working fine but elements which I imported inside of canvas, I am not able to drag them it looks like there position got shifted.
Even I am not getting ...
-1
votes
0
answers
14
views
Can place tinyMCE inside canvas tag? [closed]
We are building an app that has tinymce for text editing. The problem we are trying to solve is that the content is editable via inspect element and can change the value of custom tags and, being html,...
2
votes
1
answer
66
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-...
1
vote
1
answer
58
views
Get the expected rendered size of containing element from canvas.measureText?
I get TextMetrics for the text in a DOM element (position: absolut/fixed; display: block;) before it is attached to the document like this:
function getTextMetrics(txt, font) {
const canvas = ...
0
votes
0
answers
23
views
Having trouble getting bubbles to cluster together in center of doughnut chart
Current look:
What I'm after:
Visual Issue:
I have been trying to create a doughnut chart with clustered bubbles. The goal is to have all the bubbles grouped closely together in the center of the ...
0
votes
0
answers
31
views
D3: How to 'rotate' background texture along with the projection
I am building a spinning globe with D3 with a image texture. I have built the globe and spinning it using
this.projection = d3.geoOrthographic()
.fitExtent([[this.inset, ...
0
votes
0
answers
43
views
Ground not displaying in HTML5 canvas game - JavaScript
I'm working on an HTML5 canvas game using JavaScript, and I'm facing an issue where the ground is not displaying. I've created a Ground class to represent the ground tiles, and I'm instantiating them ...
0
votes
0
answers
17
views
drawGraph() function not working HTML5 Canvas
I'm trying to make my drawGraph function run based off a "nodes" variable that is previously defined from an input. When I run the drawGraph() function with a static value, everything runs ...
0
votes
0
answers
40
views
Rotate and move the ball from top circle to bottom circle
I'm trying to make a game using canvas, what I have is a top circle and bottom circle, and a ball spinning.
Starting from the top circle, the ball spin, whenever the ball reach the bottom of circle ...
-2
votes
1
answer
54
views
How to get an specific image on the canvas with a certain x,y position? [closed]
I wanted to get an image on the canvas on a certain x,y position and change it to a random position in a certain amount of time. I have the image URl.
I tried using drawImage function but I got into ...
0
votes
0
answers
30
views
How can you translate mouse drag to rotation about a 3D object in vanilla JS?
What I am trying to do is turn mouse drag (x,y) along the screen into full rotation for a 3D object (in this example, a sphere)
(as of writing this there is no option for me to include a stack snippet ...
-1
votes
1
answer
43
views
How to add color to canvas flashlight effect? [closed]
I was wondering if there is any way to add color effects to my flashlight in JavaScript so it looks kind of like a light on my images. I cannot seem to figure out how to do this effect that I want. I ...
0
votes
2
answers
73
views
Adding Bounded Text to React Force 2D (HTML Canvas)
Indeed, this is very specific to a package, more specifically, @vasturiano's React Force Graph. But, since it makes heavy use of the HTML Canvas and D3.js, I thought maybe someone here could shed a ...
0
votes
0
answers
43
views
html5 animation with spritesheet
let globalCanvas;
let globalCtx;
class ScratchCard {
constructor(canvasSelector, revealThreshold) {
this.canvas = document.querySelector(canvasSelector);
this.ctx = this.canvas.getContext(&...
0
votes
2
answers
39
views
How to detect which element is hovered on a CanvasRenderingContext2D with transformations?
I have a canvas on which I applied a few transformations (mostly translation to place the origin in the middle and a scale to zoom). I now want to find out if the cursor hovers an element drawn on the ...
0
votes
1
answer
33
views
HTLMCanvasElement internal dimension changes result in wrong change its layout
as I read before
The HTML element actually has two dimensions, the intrinsic dimensions (using the .width and .height properties you're modifying in JS) and the displayed dimensions (controlled in ...
0
votes
1
answer
29
views
HTML Canvas Won't Draw
I'm trying to learn the HTML canvas, but nothing is drawing on my canvas element. What would
be the best way to proceed from here? (complete canvas beginner)
HTML
<!DOCTYPE html>
<html lang=&...
1
vote
0
answers
44
views
Trying to create an html box around the letters rendered on the webpage
I am trying to measure the real height of the text rendered on my webpage, and then wrapping the text inside a box with no whitespaces. I used the method to calculate height provided by markE in this ...
1
vote
1
answer
29
views
HTML canvas keep on rendering line, even after I cleared it
I am trying my hand on building a drawing app in React using HTML Canvas element.
import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
///*[EN ROUGH]*/import rough ...
1
vote
1
answer
48
views
Emulate "object-fit: contain" for Image in Konva.js
I am trying to make resizable image with content fully fitted in rect. I found solution how to emulate object-fit: cover, but I need contain.
I made some solution:
const width = size.width;
const ...
0
votes
1
answer
57
views
Constraining Javascript canvas shapes to a specified area
Is there a way to constrain text, rectangles, and other shapes/elements to a specified rectangle in javascript? I am building a tool for use in another project and I want to draw a smaller window with ...
1
vote
1
answer
57
views
Inconsistent canvas.getimagedata() values returned on Chromium based browsers
Edit: solution is (weirdly) to activate willReadFrequently: true on the canvas, Chromium & getImageData() will return consistent values, see answer below.
I'm currently running a program that pick ...
0
votes
1
answer
46
views
Fabricjs canvas bigger than parent, how do I achieve this?
I'm new to fabricjs, and I'm trying to achieve the following: have a canvas that is a specific size (let's say 600px) but on the browser it should display smaller visually (let's say 300px).
When I ...
0
votes
0
answers
20
views
External Controls for FabricJS
I have a requirement in our application to show the object controls beyond the canvas. Currently there is no way to do this in FabricJS directly, so I created my own controls which move with the ...
0
votes
0
answers
28
views
Getting Snapshot of Html canvas at a specific position
How do I capture a snapshot of the front of a car. The car's position is at the middle of the car and the cars vision box is just at the front of the car. I want to take a picture of the front of the ...
3
votes
1
answer
54
views
Click on an object using canvas and javascript [duplicate]
I created a canvas with a circle inside it and I'm trying to detect the mouse click.
I am calculating the distance between the mouse click and the radius of the circle. The output should be 0 when the ...
0
votes
0
answers
62
views
Blur box background in Nodejs canvas api
I was searching for a way to blur behind a transparent box in Nodejs canvas API. Something like the apple glossy effect when opening a window etc. After researching I found an answer on StackOverflow ...
3
votes
0
answers
43
views
Drawing image in HTML5 canvas is blurry/squeezed [duplicate]
I am trying to draw an image on the canvas. Problem is, I was trying to draw it as contained within the canvas so that it would look good in different screen resolutions. But the image seems to be ...
0
votes
1
answer
82
views
How can I draw an internal arc in canvas, the same as the browser draws in html, for example, for div?
I want to draw a rectangle border on a canvas for a rectangle with borders of different widths and a rounded corner. This drawing should look exactly like a div with the same parameters in the browser....
0
votes
0
answers
14
views
incorrect array length when updated with React.useState [duplicate]
I am writing a react app to draw some points on canvas.
The points are managed by React.useState.
Here are the main components of the program:
class Point {
x: number;
y: number;
...
0
votes
1
answer
15
views
Adobe Animate HTML5 not showing all layers
I'm trying to load Adobe Animate HTML5 into my website. Everything looks fine when tested in Animate, but when I add to website the animation plays but not all of the layers/images are showing. I have ...
1
vote
0
answers
46
views
HTML canvas: unsatisfying results when drawing a border around a filled shape
Here are 4 examples on how to draw (in an HTML canvas) a filled shape with a border. Only one of them gives a clean result and I wish to understand why:
let canvas = document.getElementById('...
0
votes
0
answers
27
views
How to dynamically set the strokeStyle on moveTo and LintTo using canvas
I want the line should be draw with alternative stroke color like suppose i have predefined coordinates and I want to matching the pattern. If the line will not match then line stroke color should be ...
1
vote
1
answer
24
views
How to render "fog of war" style overlapping rectangles to hide and reveal areas in a computationally efficient manner?
I am trying to create a "fog of war" system in a Konva React canvas similar to what you might find on Roll20 or another virtual tabletop. Rectangles on the canvas should either hide (show a ...
0
votes
0
answers
25
views
HTML Canvas is really low-definition
I am currently building a web app where it would be useful to have the functionnality of a HTML canvas. The problem is that, whenever I try to render things, it's really pixelated.
The results I'm ...
0
votes
0
answers
19
views
Fabric js resizer implementation on existing dynamic canvas
I want to add fabric js resize tool on my existing dynamic canvas, please check below jsfiddle example for more details and code.
In above example in first click only fabric js selector come and if I ...