Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am currently working with a canvas that holds shapes. So I want to be able to keep the shapes size while zooming in or out.
I think that I need to know the canvas scale or the dpi, so I can recalculate the shape dimensions. My questions
Is there better solution for that?
If I am on the good track how can I get the current scale of a canvas? I am looking for something like in the code below.
let scale = ctx.getCurrentScale();.
Thanks for your help.
No long ago I had an issue, and Clemens helped me with that :
Zoom on Canvas, centered on mouse position
take his solution then "play" with it it will help you understand better.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am making a javascript game and I have an obstacle that when it touches the player's image, should take away a life. The problem is that I am currently detecting with the images' rectangles, and there are clear parts so it sometimes detects a collision when it doesn't look like the images are touching. I need a way to detect if the image is touching part of the image that isn't just clear background, like you make an outline of the non-clear part and check if the outlines collide. I don't know if this is possible to do with javascript, but let me know.
I have no good way of doing it fast. You see, if we do that, it will slow down much, as it says here : https://benjaminhorn.io/code/pixel-accurate-collision-detection-with-javascript-and-canvas/. You could make some smaller rectangles of different sizes, to help with more precise collisions.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to develop a maze, but the maze is bigger than the screen and i can't scroll down to see it.
I tried to change the height of the body, but that didn't work.
Can anyone see what that makes the maze so big?
here is all of my code on github.
here is how it looks.
Any help is appreciated!
You need to change your layout posting on your HTML body elements. You're using the "fixed" position, and you should be using the "relative" position.
This should explain the difference and get you back on the right path.
Additionally, you can check this for posting.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I remember seeing a codepen or a fiddle of this effect a while back.
I'm looking to build a small js feature that would track the direction of the mouse movement and transform a css card-like element in 3d space so that it looks like it's being dragged. So if I move my mouse towards the top right it would sort of push down on the top right of the card and and lift the bottom left towards the viewer.
What's an easy way to do this in javascript?
This stackoverflow question has mostly what you need.
But you can check out the chill the lion codepen too, it's using
requestAnimationFrame(loop);
which is a nice solution.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How would you go about animating (and creating) the circles as shown in the image with javascript? I'm not sure what to call this, so I just said "border".
You'll need to animate svg elements bound to some data. Have a look at the D3 Radial Progress Component. This component is based on d3.js which is "a JavaScript library for manipulating documents based on data".
Please note that d3 is really complete and might be an overkill if you are just dealing with one graphic. But at least now you know what to search for.
There is a lot ways to do it, here are some
JS/Canvas:
http://p.ar2oor.pl/cprogress/
http://anthonyterrien.com/knob/
CSS3:
http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
http://www.alessioatzeni.com/blog/css3-loading-animation-loop/
SVG:
http://raphaeljs.com/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I know its not an acutal problem but I found this demo http://cssdeck.com/labs/interactive-particle-logo
Can someone explain how draw png images on canvas with other objects?
In that example they are using a library called particle slider which takes an image and draws it in particles.
See http://particleslider.com/ for more details.
The exact method you want is here http://particleslider.com/documentation/api#ParticleSlider.getPixelFromImageData
Going into how to write the library from scratch is probably a bit to advanced for a stackoverflow question :)