I am making a small draw pad script using HTML5 canvas and JS.
I encountered a problem which I think maybe be caused by using 2 'mouseup' event listeners but I am not certain - so I was wondering if someone could take a look at the code.
The problem is that when dragging the brush size slider, if not letting go of the mouse while still hovering over the slider - the first line you try to draw on the canvas gets stopped half way.
Actual link: www.ronjrtech.com/draw
Pastebin: http://pastebin.com/hCbPkSRF
I do know the code itself is kind of a mess..
If there is anything else I could explain, please let me know!
Thanks in advance :)
Related
I wrote a function whose purpose is to re-draw a square line block (which cover whole page) every time when the window size is changed.
http://jsfiddle.net/9hVnZ/
The problem is that
bgCtx.clearRect(0, 0, bgCtx.width, bgCtx.height);
didn't work for me: As my Chrome browser size changed, the previous red lines does not clear as I thought.
reproduced screenshot:
http://i.imgur.com/6aePMLm.png
I tried browse other answered questions, some of their cases are missing bgCtx.beginPath(); but I did include it, andbgCtx.width = bgCtx.width; doesn't work, either, am I missing something or anything wrong?
Any suggestion would be appreciated :)
You're creating a new canvas element on every draw().
Fiddle
I got one serious problem, concerning a canvas carousel. I decided, as a first html/canvas/javascript approach, to try to make myself some picture carousel.
You can find it here, on everypage of my homepage http://www.wizopunk-art.com
I deactivated the carousel, so just...
var wizopunk = new backroundViewer("backgroundCanv");
..somewhere in your console
As you might sens right away, the animation isn't very effective.. It seems I got some kind of memory leak, but I'm unable to find it on my own.. I was hoping you might have some hint, like usefull tools or even if somebody want to throw an eye in my own script.. I got the impression that each picture I draw on the canvas is kept in memory..
here the link to the script :
http://www.wizopunk-art.com/javascript/carousel.js
I don't know if my description is precise enough, and I don't mean to bother or something.. so please just tell me if I'm missing something in my message
PS : sorry for my poor english..
First... a better way of creating a rendering loop is using requestAnimationFrame instead of setInterval. Another thing is rendering everything in background first. Overe here you can find quite many performance tips on developing with the canvas element. (http://www.html5rocks.com/en/tutorials/canvas/performance/)
So I'm toying around with KineticJS and I'm having some problems with a button I'm making. All I want it to do is reset the positions of my objects when I click it.
I've created the button, set up the onclick handler to point to my function that I've created (and included in the HTML, along with my CSS), and I've gone through the KineticJS documentation for changing the position of it's objects, and have tried the following options:
object.setX(200);
object.setY(50);
object.setPosition(200,50);
All with no luck. I've attached a screenshot with all my relevant code (This is my first time playing as a web dev, please don't tear me up too much). The rest of the code in the middle column is just end tags for body/html/etc.
NOTE: I know the values are not what they were originally. I just threw in arbitrary numbers (still within the bounds of my canvas) to see if they'd change at all.
Thank you for any help!
Fullsize: http://i.imgur.com/aKbiI.png
You need to add layer.draw(); at the end of resetXY function
I am working on a basic game in javascript. I don't use jQuery. The thing is that I have trouble in getting rid of the flickering. I noticed it happens because of the canvas clearing command. I read a lot of suggestions that recommended a sort of double buffering like having a buffer canvas on which I should draw which is not visible and another canvas which is visible and all the content is copied from the buffer. However, I doubt that even if I implement this I would still have the flickering as I still have to clear the visible canvas.
The final question is : What is the best way of getting rid of the flickering in my code? Thank you for your help.
this is a sample of my code:
http://edumax.org.ro/extra/new/Scratch.html
In your draw() method you call loadImages(), hence loading the images every time you redraw, ie every time the apple moves, hence the flickering.
Just put some breakpoints in your draw method it will all become pretty clear.
I guess what you want to do is to load the images at loading time then just draw... no need to load on every move.
I have a small problem with how should i think a... problem. I want to do something somehow similar with this: when you move mouse near to the edges, you will see images scrolling faster than how is scrolling when you have the mouse in the midle of the DIV.
Don't know if i explained right, but ... i don't know how to tackle this. I'm sure that is binded on mousemove but also i guess is somehow related to math. And math isn't my best skill :D
Thanks guys!
Unfortunately there's not much more to tell you than what you can already read in the source code of the site you linked from line 59 onwards.
I'd likely recommend simply trying to duplicate something similar within your own sandbox page using that code they have as a guideline. Simply strip out everything you can and just start with a single image, bind the mousemove event and try and get relative positions using offset (see jquery - offset).
It's a pretty nice implementation of the new canvas tag though, I haven't seen it used much yet, so thanks for passing on the link. I can at least offer you some interesting links on the canvas tag that might give you a few pointers.
This is an old question, but you can calculate a procentage based on the distance between the mouse position and the edges. Then use that procentage to set the speed of the animation.