Questions tagged [canvas]

Canvas is a generic term for the drawing surface used with many free-form graphics output APIs. Use this tag with other tags that indicate the specific graphics API that is being used along with the programming language and the target environment: [android], [uwp], [wpf], [tkinter], [java], [html5], [chart.js] etc. Also include a specific canvas tag such as [android-canvas], [html5-canvas], [tkinter-canvas] if appropriate.

Filter by
Sorted by
Tagged with
0 votes
0 answers
8 views

Tkinter Scroll Event Not Propagating to Canvas in Complex Layout

I'm working on a Tkinter application where I have a Canvas widget alongside a vertical Scrollbar. Nested inside the canvas, I have multiple Frame widgets that represent clickable and scrollable ...
Matthew Price PhD's user avatar
0 votes
1 answer
28 views

Rendering isometric tiles in JAVA

I have a sprite sheet with an isometric sprite in it, it's a basic isometric cube I would like to render appropriately but can't manage to find a way tried different ways to calculate x and y to ...
Fatos Berisha's user avatar
0 votes
0 answers
14 views

Fabric js React: Drag shape from button and drop on Canvas not able to place on mouse drop position

i am trying to drag rectangle shape from the button and to drop it on any position of canvas. But it's not able to put in particular position, it's on different position. I am using fabric js with ...
Raikumar Khangembam's user avatar
0 votes
0 answers
3 views

How to create an infinite surface in Android?

I want to create an app with many objects on a surface, and you can move through the surface in any direction, also zoom in and out. Like for example Miro or Figma. Is it possible with some libraries ...
Dmitry Sukhov's user avatar
0 votes
0 answers
10 views

the dimension are not updating in canvas Api

import React, { useState } from "react"; import "./Room.css"; import { Redo, Undo, ModeEditOutline, ChangeHistory, PanoramaFishEye, HorizontalRule, RectangleOutlined } from "@...
Incogination Khan's user avatar
0 votes
1 answer
21 views

Store canvas drawing in local storage and display as an image?? (javascript)

I want to store a canvas drawing in local storage and then display as an image using javascript?? Help med understand how to best store the canvas and then display it as an image! The result i'm ...
Bwunkaz's user avatar
  • 11
0 votes
0 answers
18 views

use canvas getImageData and my canvas background is empty [duplicate]

i use two canvas, one canvas load image, another one load imgage. when i use getImageData this function the first canvas's image is empty. <html> <head> <title>Canvas</title> ...
onlyye's user avatar
  • 1
0 votes
0 answers
6 views

I want to draw movable bitmap and later erase its part using canvas in android studio

I have a sticker bitmap and draw the sticker on canvas and erasing by moving finger on it . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . [enter ...
Hammad Naveed's user avatar
1 vote
0 answers
50 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
0 votes
0 answers
14 views

npm i canvas on MacOS M2

When I try to install canvas on my nextJS 13 project, I get this error: npm ERR! code 1 npm ERR! path /Users/user1/Projects/Raccord/webapp/node_modules/canvas npm ERR! command failed npm ERR! command ...
psYshiX's user avatar
0 votes
1 answer
73 views

Applying a Blur Effect to the Entire Screen Except for a Specific Rectangle in Jetpack Compose

I’m working on a project using Jetpack Compose in Kotlin and I’m trying to apply a blur effect to the entire screen, excluding a specific rectangle. The goal is to blur the background, regardless of ...
Oleksandr Myronchuk's user avatar
0 votes
1 answer
25 views

Have an image proportionally cover a canvas set to 100% width and height

I have a canvas set to 100vw and 100vh. I want the canvas image to cover it proportionally, like how background-size: cover works. I can find code on stackoverflow to make this work for the width OR ...
StephD's user avatar
  • 276
3 votes
2 answers
108 views

Why do SwiftUI Canvas and Metal render differently?

My app requires to render a SwiftUI View with an opacity defined by a field function. jrturton developed a Canvas version, and a much faster Metal version (thanks again!). I expected that both ...
Reinhard Männer's user avatar
-2 votes
0 answers
18 views

Extracting text data from canvas in Python without OCR [closed]

I am working on a project where I need to extract text data from an HTML canvas using Python. I am aware of OCR solutions, but due to specific project constraints, I am exploring alternative methods. ...
Samala Hari Prasad's user avatar
-2 votes
1 answer
20 views

Is it possible to extract data from a canvas without ORC? [closed]

I am trying to extract data(numbers) from a dynamic chart/graph which is a canvas using python(should i switch)?. From what I can tell the website requests data to then calculate the numbers using js ...
cat thats fat'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
1 vote
1 answer
14 views

changing things in canvas by mouse movement using javaScript like size and location

I am just starting programming, and this is my second project—it's a paint app. I saw the project on YouTube and cloned it in my own way. However, when I encountered problems, I referred to the video, ...
Otman Ouba's user avatar
2 votes
2 answers
145 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
1 answer
23 views

Web Worker Offscreen Canvas toBlob latency

I have a hidden canvas in a react app that I send to a web worker using transferControlToOffscreen (code). Everything is working, but after updating the canvas (fillRect for example) the worker ...
Micah's user avatar
  • 29
0 votes
0 answers
55 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
0 answers
14 views

How to draw offcanvas of offscreen canvas to onscreen canvas?

What I'm making a 2D game on pure JS and I use CanvasRenderingContext2D.translate() to emulate camera movements. I mean that my drawable level is much bigger than the canvas itself (when the canvas ...
aexra's user avatar
  • 1
-3 votes
0 answers
23 views

HTML in 2K for PC screen [closed]

How do I use HTML5/JavaScript to draw graphs in 2K? I just use plain JavaScript with canvas. However, I can only get graphs of 1280 by 720 for a typical laptop/TV screen, even though the TV can ...
Sendy tay's user avatar
-1 votes
0 answers
17 views

Build MCD diagram with canva HTML

I need to diagram my database and table dynamically with Canva html. Except I don't know how to go about it. First to display the tables one after the other and manage several tables at the same time. ...
nimondo's user avatar
  • 65
-1 votes
0 answers
36 views

circle with 8 sectors each sector contain 8 charecter [closed]

I'm implementing a circle with 8 sector and each sector contains 8 character how can I make fixed position in each sector to display the 8 characters so that when I rotate left and right the ...
rororo's user avatar
  • 9
0 votes
1 answer
46 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
1 vote
1 answer
57 views

How Do I Arch Text In Reportlab

text = 'Hello World' length = len(text) can.translate(400, 293) can.rotate(-1 * 200 / 1.06) can.rotate(-1 * (200 / length) / 1.06) for n in text: can.rotate(200 / length) can.translate(0, -1 * ...
Roizy Kish's user avatar
0 votes
0 answers
12 views

Canvas context.toDataUrl() returning a "data:"

I'm trying to create a function that converts an image url to a base64 string. The problem is that the return value of the toDataUrl function is "data:" `export const getBase64FromImageUrl = ...
Pedro Brandão'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 vote
1 answer
44 views

Add grid lines to canvas by creating custom shape with MVVM WPF

I want to switch my code-behind project to MVVM design., but I'm having a little trouble with this. I have canvas panel and i want create grid lines as backround. In Code behind i am adding the grids ...
Gokhan's user avatar
  • 455
0 votes
0 answers
16 views

why pixijs ignore this case?

when I read pixijs source code, I found that the hit region detect algorithm that the class Polygon use is as follow : contains(x: number, y: number): boolean { let inside = false; const ...
Bruce Wong's user avatar
-1 votes
0 answers
31 views

Cropping a Sprite sheet , and how to offset frames if necessary?

I am attempting to utilize to create Sprite animation. I am having difficulty with creating the cropped box that isolates the frame for animation since not all of the behaviors have the same ...
ifaus's user avatar
  • 11
0 votes
0 answers
17 views

Calculate Overlap Area of 2 Polygons in React

I'm working on a tool where users can mark a specific area on an image based on a question and then evaluate if the marked area is correct. The user is prompted to draw a polygon on the image by ...
Milan's user avatar
  • 1
-1 votes
0 answers
19 views

ability to select multiple items from a list box in a Canvas App

I need the ability to select multiple items from a list box in a Canvas App. As items are selected the values are saved in a text field that will be hidden (as shown in the simple image). Is there a ...
GoBeavs's user avatar
  • 497
-1 votes
0 answers
21 views

Make multiplayer drawing game canvas responsive

I am currently building a multiplayer drawing game with react (client), nestjs (backend) and WebSockets (It is like https://skribbl.io/). My drawing logic works fine as long as the canvas element ...
septimus'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
1 answer
95 views

Get Center Coordinates Of Canvas Panel WPF MVVM

I want to draw a shape in the middle of the canvas with mvvm pattern. In code behind I was reaching the middle point by using the ActualWidth and ActualHeight properties. But I'm having trouble doing ...
Gokhan's user avatar
  • 455
0 votes
1 answer
159 views

Unable to connect Share Point site in Power Apps Canvas app

I have a SharePoint list named "Project Tracker" and this list has some records. Now, I want to connect this list to my Power Apps [Blank Canvas app -> Connect Data]. Unfortunately, I am ...
Ganesh M's user avatar
0 votes
0 answers
19 views

Is there a way to make 2 canvases with an image on both of the canvases?

So I want a canvas with an image on both of them. Here is the canvas code I currently have <img id="Man2" width="0" height="0" src="Man2.PNG" alt="Man2&...
ToMadToCode's user avatar
0 votes
3 answers
31 views

I have trouble making a canvas take up the full window using HTML5 and JS

I am trying to code a basic game. However, I keep running into the issue that scroll bars appear, meaning that something is bigger than it should be. I looked into it a bit, and it seems it is the ...
Annon's user avatar
  • 1
0 votes
1 answer
37 views

Zoom function in canvas with MVVM pattern in WPF

I have been converting my app to MVVM pattern. I am trying to figure out zoom in function. There is canvas panel and ellipse in my project. The problem is zoomIn function is working but only when ...
Gokhan's user avatar
  • 455
0 votes
0 answers
30 views

Have Canvas Image Move Upwards in A Loop

I'm making an image matching game and I currently have a set image on my screen (the one that needs to be matched with) and a fading image as well (the one that needs to move up to match with the set ...
g dhu's user avatar
  • 11
0 votes
1 answer
29 views

I want to implement a lasso tool in react-native-sketch-canvas

I have implemented a canvas draw feature using https://www.npmjs.com/package/@kichiyaki/react-native-sketch-canvas. Now I want to implement a lasso tool where i can select an area in the canvas and i ...
Mandar Joshi's user avatar
0 votes
1 answer
42 views

HTML Canvas Ball Collision Issue

I'm creating a simple program to simulate balls bouncing around a circle. I've run across a problem where occasionally, the balls will collide with the inner circle and get stuck. I'm not entirely ...
Liam's user avatar
  • 31
0 votes
0 answers
20 views

Fabric js images filters not applied properly

So when I apply filters to the image I have selected there's like a second image that appears(the original colour) but when I click on the image again it disappears here's the entire code I have added ...
Tyler Rake's user avatar
0 votes
0 answers
39 views

How to map points on an image and make it responsive

here is my mapped points Im trying to map sections of a stadium and make them clickable but when i get the points and add them to my array there always a little off so i think my calculation might be ...
Michael Hutchinson's user avatar
0 votes
1 answer
47 views

Taking notes on a webpage on an iPad

I am currently working on my code and am wondering how can I create a box where an iPad user can take notes in the box with their finger/pen. I thought I saw it somewhere somwehre and tried to ...
Testa Maxima's user avatar
-1 votes
0 answers
45 views

python -- tkinter -- bind for canvas fail, bind_all can work

I try to bind key for Canvas (tkinter), However : 1\ my_canvas.bind will NOT work 2\ my_canvas.bind_all will work I am not sure why my_canvas.bind can't work. The code is : # bind_all can work # bind ...
Tony Wu's user avatar
0 votes
0 answers
24 views

Insert various external div's on HTML canvas

Currently I am trying to create screenshot functionality of a Geospatial map Below I have achieved to get the Geospatial map as a screenshot, where as I need to add few divs from outside the ...
jats's user avatar
  • 87
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
0 votes
0 answers
61 views

tkInter nested canvas's not display full contents of frames

I'm trying to build an appointment type application. I need nested Scrollbars to simulate an Excel 'freeze top row' type of function. I may have too many columns to fit conveniently, so I've put a ...
Rookie Mac's user avatar

1
2 3 4 5
720