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
Related
I'm trying to modify the t-rex game to make the character dive instead of jump. This is what I'm referring to: https://github.com/xkuga/t-rex-runner.
As soon as the character dives out of the canvas, it leaves an unexpected trail.
I don't expect you to make clone & make changes in the repo to replicate this behavior. I have changed canvas size, the container size, tried clearing up canvas but nothing helped. Can you suggest possible reasons?
It seems like a clearRect issue to me. A code example would help some. You have to clear the canvas with each frame, or at least clear the part of the canvas the protagonist moves from.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect
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 :)
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.
Been banging my head against this one for a while, and figured I'd turn to the experts for some advice.
I've made a jQuery snippet that grabs the values from a table and plots them in a line graph on a canvas element (also generated by the JS). All's well in Firefox and Chrome, but Safari and Opera aren't displaying the plotted points. I've reviewed in Firebug, Web Inspector debugger, JSLint, and checked the markup with the w3 validator, but still can't find anything glaringly obvious. I've also tried including the canvas element in the HTML rather than generating it dynamically, as well as substituting a tag pair for the self-closing tag I've been using—all to no avail.
Any chance one of you guys could help me out?
Thanks!
I draw lots of lines in Safari so I checked my code and the pattern is...
beginPath
moveTo
lineTo(s)
closePath or stroke
In your code moveTo is before beginPath, so I switched that in one of my apps and it stopped drawing, so try switching those around.
I think this is a problem of the time when you call stroke(). Try to call it only after the for loop, and try differents positions of the closePath call.
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.