Skip to main content
Filter by
Sorted by
Tagged with
0 votes
0 answers
35 views

The Graphics2D.drawImage() method works, but the image doesn't appear on the panel

I'm trying to draw an image on this panel for a game similar to Window Kill. Using the System.out.println() method, it seems the image is being drawn, and I call the repaint() method in the thread. ...
Howell's user avatar
  • 11
0 votes
2 answers
92 views

canvas drawImage() render Font Awesome Icon

I need to render font awesome image using canvas drawImage(). The drawImage accept image argument: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#image An element ...
truongnm's user avatar
  • 2,434
0 votes
1 answer
99 views

Javascript need to output HEX instead of RGB (getImageData, drawImage)

Just to clarify im not very good at javascript and still learning. I found this pieace of code on the internet, it takes an image and makes it to small span cells to get a pixelated image. The code ...
Silas's user avatar
  • 3
0 votes
1 answer
70 views

React JS canvas getImageData from local image shows 404 not found error

I would like to get the alpha channel data from all the pixels in these small png images that are within the project's files. But for the moment, I am just doing a console.log to see if I can actually ...
Felt_Notebook's user avatar
3 votes
0 answers
139 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,504
0 votes
0 answers
202 views

How to set a background image to a customPaint in flutter

i have a customPaint drawed by this tool here. i just want to set an image as a background for this customPaint that take the same shape as the customPaint but the image fit the whole screen not the ...
ILii's user avatar
  • 99
1 vote
0 answers
42 views

why won't this draw on the mapcanvas

I have no idea this this.canvas.getContext("2d").drawImage in the map function will not draw, It seems to be creating the canvas but just on drawing on it, it also does log all the numbers ...
Dom C's user avatar
  • 11
1 vote
1 answer
58 views

Javascript drawImage() does not show image in HTML canvas

In my simple test code (HTML and JavaScript) to place an image in a canvas, drawImage() is not working. An image is created in the HTML page but not in the canvas. The code is: const canvas = ...
Bob's user avatar
  • 21
1 vote
1 answer
205 views

How can I adjust a sprite sheet frame size within a canvas?

I have a canvas element and i'm drawing on this little duck sprite sheet to fly across from the right hand side of the screen to the left. The code i have right now achieves that. But i can't for the ...
Brandon's user avatar
  • 374
1 vote
0 answers
43 views

Canva drawImage not working in chrome use this image

use chrooe open devtools open this page https://codesandbox.io/s/fervent-benz-44qsh2?file=/index.html only this imgae can't render in chrome. const canvas = document.getElementById("myCanvas&...
xhay's user avatar
  • 11
0 votes
0 answers
75 views

context.drawImage() not working with local image stream

So i have a local image stream (through an eps32cam that streams images to a specific ip) that I then want to transfer to a canvas to display the RGB values. My problem is that other images work ...
Anonym's user avatar
  • 21
0 votes
1 answer
51 views

canvas.toDataURL("image/jpeg") can't be used in .drawImage()

I am trying to capture a canvas screen using canvas.toDataURL("image/jpeg") and then use it in ctx.drawImage();, but it gives the error "Uncaught TypeError" saying that the image ...
Golden Orange's user avatar
-1 votes
2 answers
30 views

Why does drawImage() change the canvas outside the destination box?

Based on the documentation of drawImage(), I'm trying to draw to a specific part of a canvas. However, areas outside of the destination box are being affected, namly having their alpha values zeroed. ...
Brian White's user avatar
  • 8,646
0 votes
1 answer
35 views

Canvas drawImage z-index

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &...
Madhukar reddy's user avatar
1 vote
1 answer
73 views

Canvas not drawing all images only on certain mobile devices

I'm having a problem with the canvas not drawing all images (only some are drawn) on specific devices. To be exact Mobile Chrome (Samsung), I have not met this issue on any other device so far. ...
TheE's user avatar
  • 348
0 votes
1 answer
100 views

Javascript drawImage not drawing anything inside canvas [duplicate]

I have the below JS code. It's supposed to take the contents of a canvas, resize them and then save them as an image. saveImg.addEventListener("click", () => { var img1 = new Image(); ...
Irina Morel's user avatar
1 vote
1 answer
297 views

Why are my canvas images not loading/rendering in proper sequence or as expected with image.onload? [duplicate]

I am trying have one image load onto an HTML canvas and then another image load on top of that image. However, I am getting the following behaviors from each browser: Chrome: 1st execution - Only the ...
BrittanyL's user avatar
1 vote
0 answers
281 views

safari canvas drawimage issue

I'm capturing an image from video. but I can only get blank images when I use on safari. But on Chrome It works well. Please let me know if anyone knows this issue. const [previewUrl,setPreviewUrl]=...
devrobot's user avatar
0 votes
2 answers
385 views

Unexpected cropping of SVG image when resizing canvas

const pieceSVG = document.getElementById("pieceSVG"); // Convert the SVG element to a string to be converted to blob var svgString = new XMLSerializer().serializeToString(pieceSVG); //create our ...
JoshD's user avatar
  • 36
0 votes
1 answer
61 views

Dot Net Label PaintEvent

The problem is demonstated by the following little program: Private Sub btnGo_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGo.Click ' RaiseEvent End Sub Private Sub ...
LaLue's user avatar
  • 1
0 votes
2 answers
98 views

HTML5 canvas drawimage avoid first time load latency

I am working on a sidescroller game and it has tiles that I am loading in as needed a little ahead of the player. They are 1000x1000px so not insignificant loading times. While loading in the first ...
jeff8j's user avatar
  • 33
0 votes
0 answers
49 views

How to optimize drawImage source and destination coordinates to visible region of the canvas

In some exotic HTML5 Canvas implementations rendering an image with drawImage() to a small canvas but using a large scale factor cause massive memory consumption, crashes or rendering errors because ...
kayahr's user avatar
  • 21.7k
2 votes
1 answer
577 views

What is causing the 'Image Decode' performance differences between my phone and my PC?

I am currently developing a 2D game using Javascript and Canvas. The game runs perfectly on my 8 year-old PC, on my Samsung S21 FE however, I get a lot of freezes. The built-in performance tab of ...
guy1997's user avatar
  • 286
0 votes
1 answer
955 views

capture cropped image from video stream with javascript

I am taking a picture from a video using this tutorial HTML: <canvas id="canvas" style="display:none;" ></canvas> <div class="output"> <...
Azamat Uzbekov's user avatar
0 votes
0 answers
238 views

index.html:308 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or

getting index.html:308 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or ...
pratik shourabh's user avatar
0 votes
0 answers
13 views

DataURL needs to be converted in Image and image needs to be cropped and saved into multiple images?

I am new to angular. I've a scenario where I am getting a DataURL which needs to converted into image and without saving that image I've to crop or split that image into different images from a ...
Tushar Shinde's user avatar
0 votes
1 answer
514 views

How can I make "REAL" infinite grid with canvas?

So i need to create an infite grid and can draw image per tile with mouse click like this page, what is the idea here to make it? https://playgameoflife.com/ i tried the answer in the How can I make ...
Quan Vu's user avatar
  • 67
0 votes
2 answers
73 views

conditional context.drawImage() function

I have a context.drawImage() function inside a draw function of a class. When I pass static values it works just fine: context.drawImage(this.image, this.position.x -12, this.position.y -12) But what ...
Maxswift's user avatar
0 votes
1 answer
2k views

How draw a rectangle directly on an image in flutter

I want to draw a rectangle on the actual image and don't want to use the flutter renderer to add a rectangle on the top layer just as a view. I can get the pixel color, but how can I overwrite the ...
A9191's user avatar
  • 23
0 votes
1 answer
378 views

CanvasRenderingContext2D.drawImage() working differently on mobile vs desktop [duplicate]

In development of my website I've noticed a difference between production on mobile and desktop views. In my website you can crop images(using react-easy-crop) and then it uses drawImage to make a new ...
Kaleb Schmottlach's user avatar
1 vote
1 answer
241 views

Canvas drawImage: Proportion Issue when linearly interpolating from "fit"- to "fill"-style settings

I have a canvas and I want to be able to draw an image in different sizes from "fit" (like CSS "contain") to "fill" (like CSS "cover"). I use drawImage() with ...
Severin's user avatar
  • 55
1 vote
1 answer
2k views

Problem with loading assets into canvas - Uncaught (in promise) DOMException: An attempt was made to use an object that is not, or is no longer usable

I'm trying to load images from my array using the drawImage canvas method. The problem is that it sometimes throws me the following error Uncaught (in promise) DOMException: An attempt was made to ...
anathrax's user avatar
0 votes
1 answer
374 views

JS drawImage as a method in class

I started a simple project in javascript a few days ago and found this issue. Every time I reload my google-page i get an empty canvas. I have already tried to take out the drawImage() function out of ...
Mykyta_GloryToUkraine's user avatar
0 votes
0 answers
170 views

Poor image quality Graphics2D.drawImage()

I'm having some problems drawing images in Java. I have an image.png file on disk that Java needs to read and then draw. But as a result, I got a poor quality image, especially double lines. public ...
Nazar Boiko's user avatar
0 votes
1 answer
403 views

How to draw image on wheel of fortune?

I have used the wheel of fortune code from how to draw a wheel of fortune? I've modified function drawSector(sector,i) to drawImage on each sector like this: function drawSector(sector, i) { ...
Duc Manh Nguyen's user avatar
1 vote
0 answers
473 views

How to convert an array of bytes into an image that can be drawn onto a canvas?

I'm using node-canvas to do some image manipulation (in this example to convert the image to a grayscale version, just to keep the example simple). I have no issues getting the raw data, but I'm ...
Dave Sag's user avatar
  • 13.5k
2 votes
0 answers
799 views

Zooming HTML <canvas> so it's not blurry

I have a bit of code that copies from an off-screen source to the on-screen destination. let destCanvas = document.getElementById("render"); let ctx = destCanvas.getContext('2d'); let ...
Randall Fairman's user avatar
0 votes
1 answer
53 views

Javascript's function drawImage() needs the page to reload to work

I have a problem with the javascript function drawImage(). It needs the page to reload to work. My code: <canvas id="canva" width="350px" height="350px" style="...
bilibob86's user avatar
1 vote
1 answer
431 views

Remove image background with HTML Canvas given the alpha matte

How to remove the background of an image using HTML Canvas, given an alpha matte as a matrix? More context about the problem: Alpha matte is a matrix of floats between 0 and 1, inclusive. It ...
Imran Kocabiyik's user avatar
2 votes
1 answer
832 views

Node.js Application, leveraging JSDOM and node-canvas, trying to drawImage from one canvas to another

I have a code snippet, where I'm leveraging two canvases... One is generated in an emulated DOM, using JSDOM... and the other is directly using NPM-Canvas I am using heatmap.js to create an image in ...
Justin Young's user avatar
0 votes
1 answer
174 views

HTML 5 wait for drawImage to finish in a Vue SPA

I have been trying to debug something for a week and I now suspect the problem is that the drawImage function does not have time to finish. I have a for loop that composes a canvas element by ...
Curious's user avatar
  • 391
1 vote
1 answer
524 views

C# Graphics.DrawImage truncated/cropped image when printing

Im trying to print an image with C#. The problem is that the image is cropped/truncated when printing. The resolution and width/height are correct since 2 borders match the printed page, but the image ...
rockstiff's user avatar
  • 383
0 votes
1 answer
698 views

Cropping the relevant part of the browser window after identifying the location of the interested element

I have a webpage where I've embedded a YouTube video in an iframe. I need to capture the screenshot of the YouTube video. Using libraries like html2canvas and dom2image didn't work because of cross-...
Shubham Agarwal's user avatar
1 vote
1 answer
1k views

The image drawn on the canvas with safari is not displayed

I am making a program that reads a video and displays one second later as an image. The image is displayed correctly on Mac, but the image is not displayed on Safari on iphone. There are no particular ...
肬黒竜太's user avatar
-1 votes
1 answer
133 views

How can I get a picture of an HTML element's content, including content not visible on the screen?

What I want to do is take a screenshot using html2canvas.js library but of the whole div not part of it which is only included in the client's view. What happens with my way of doing it is that it ...
Marcian Bondoc's user avatar
0 votes
3 answers
983 views

HTMLMediaElement.currentTime does not appear to advance between requestMediaFrame callbacks

I have a fairly simple iteration that copies the content of a <video> into a <canvas>. The idea is that I start copying when the video plays and stops copying when it detects that the ...
jyurek's user avatar
  • 1,177
1 vote
1 answer
573 views

Error in loading drawImage() method in Javascript canvas

I have the following class inside my code: //Collectables const humanImg = new Image(); humanImg.src = "../images/human.png"; const mutationImg = new Image(); mutationImg.src = "../...
Raúl's user avatar
  • 159
1 vote
1 answer
458 views

Using drawImage with a video as a source appears to only copy one pixel?

I have a video that's streaming parts of a video into a MediaSource and playing it. I have a canvas that I want to draw the video on an then overlay some effects. However, in my handler, the call to ...
jyurek's user avatar
  • 1,177
0 votes
1 answer
475 views

DrawImage delete - PySimpleGUI

Need help with deleting only one DrawImage on my canvas in PySimpleGUI. Canvas is loaded with a background image (100% of the canvas), and has 5 other DrawImage items on it (various sizes). When I ...
GB DPA's user avatar
  • 13
1 vote
1 answer
139 views

Glitch when scaling transparent image using drawImage

I'm trying to scale an image with transparent pixels using CanvasRenderingContext2D.drawImage, but whenever I draw the image what I end up getting is both the original size image and the scaled ...
epileptic's user avatar

1
2 3 4 5
14