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.

Filter by
Sorted by
Tagged with
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 ...
Nuntea7's user avatar
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 ...
Abhimanyu's user avatar
  • 715
-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 ...
Mohammad Shokin's user avatar
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=&...
just a user's user avatar
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 ...
Priit Kenkmann's user avatar
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 ...
rolinger's user avatar
  • 2,892
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: ...
Hannington Mambo's user avatar
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 ...
Heavenly Gater's user avatar
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 ...
Stefan Hesman's user avatar
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....
Manik's user avatar
  • 573
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:...
Aaaaa's user avatar
  • 9
-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 ...
Mats Raemen's user avatar
  • 1,779
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 ...
walid naceri's user avatar
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)...
pcarvalho's user avatar
-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 ...
Formatted Life's user avatar
-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,...
La Bola Al Riel's user avatar
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-...
Undwell's user avatar
  • 23
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 = ...
Leo's user avatar
  • 4,204
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 ...
Jzolo's user avatar
  • 1
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, ...
Jagan Veeraraghavan's user avatar
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 ...
CodeMaven42's user avatar
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 ...
Elsa's user avatar
  • 25
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 ...
Buildermine's user avatar
-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 ...
Police Nguyễn's user avatar
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 ...
Yonk's user avatar
  • 1
-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 ...
Rslab8711's user avatar
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 ...
Philippe Fanaro's user avatar
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(&...
georgio bejjani's user avatar
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 ...
SteeveDroz's user avatar
  • 6,052
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 ...
pkirill's user avatar
  • 41
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=&...
Elsa's user avatar
  • 25
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 ...
Yusra's user avatar
  • 11
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 ...
Tushar's user avatar
  • 433
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 ...
EgorkZe's user avatar
  • 403
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 ...
Evan Troxell's user avatar
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 ...
sharkman's user avatar
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 ...
Raul Mellado's user avatar
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 ...
Debjit's user avatar
  • 326
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 ...
CarManDude's user avatar
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 ...
walid naceri's user avatar
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 ...
Aviato's user avatar
  • 85
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 ...
Vpp Man's user avatar
  • 2,424
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....
Николай's user avatar
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; ...
GeauxEric's user avatar
  • 2,854
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 ...
Lars Hovden's user avatar
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('...
Yosko's user avatar
  • 339
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 ...
Avinash Kumar's user avatar
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 ...
Ryan Malley's user avatar
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 ...
Leotheperegrine's user avatar
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 ...
priti narang's user avatar

1
2 3 4 5
244