691
questions
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. ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 = ...
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 ...
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&...
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 ...
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 ...
-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.
...
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">
&...
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.
...
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();
...
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 ...
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]=...
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 ...
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 ...
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 ...
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 ...
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 ...
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">
<...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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) {
...
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 ...
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 ...
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="...
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 ...
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 ...
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 ...
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 ...
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-...
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 ...
-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 ...
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 ...
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 = "../...
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 ...
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 ...
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 ...