Sie sind nicht angemeldet.

1

Sonntag, 31. Oktober 2021, 11:39

canvas api / makescreenshot hotspot position question

Hi all,

I'm trying to get x/y values of my canvas. Read a lot of approaches but my brain is fried now (no clue about js).
I want to pass the x/y value to a hotspot which shall be the watermark of screenshots.

Does someone have a hand?

Not sure how to work with this yet and if its the right direction..
https://developer.mozilla.org/en-US/docs…ng_putimagedata
https://www.w3schools.com/tags/canvas_getimagedata.asp


Thanks!
Max

2

Dienstag, 2. November 2021, 08:28

In retrospect the approach to get x/y pos of canvas to create a krpano hotspot for showing in the canvas was not very clever.
It was a helper because I couldn't draw an image to the canvas.
In fact, the image was implemented, but it did not load and the screenshotcanvas already got created before the image loaded.

So trying around for some hours I finally managed to draw images where I want on the canvas with the very easy drawImage and build a small preload function of the biggest image to load around all other drawImage, addlayer and fillText methods.
Jippie!

This seems really easy now that I know, haha.... damn. I wish I learned how to trace console.log before I tried around..

Quellcode

1
2
3
4
5
6
7
8
9
10
var pokal = new Image();
pokal.parent = "screenshot";
pokal.zorder = 5;
pokal.src = 'images/pokal.png';
pokal.onload = function () {
	ctx.drawImage(pokal, screenshotcanvas.width / 2 - pokal.width / 2,screenshotcanvas.height / 2 - pokal.height / 2);
	ctx.fillText(zfin, (screenshotcanvas.width/2), (screenshotcanvas.height/2));
	ctx.drawImage(logo, 15, 15, 140, 71);
	...
}

Ähnliche Themen