HTML 5 Canvas Hide? - javascript

Is there an event that can be used to hide the canvas after it plays its animation? I have a canvas animation that plays then rests. I then want to use JavaScript to hide the canvas and show a static image with more intricate image swaps and linking than I know how to do in the canvas. Is there any way to do this?

No, there is not, because the HTML5 canvas API has no such concept like an animation. Everything that happens on a HTML5 canvas is the result of your script code changing the canvas content, so you should know best when you are finished changing it and no more changes are going to happen.
In a comment you said that you didn't write your canvas code yourself but used a tool to convert a flash animation to Javascript. So your options are:
You could try to understand the generated code and how to modify it to hide the canvas after it did the last thing it will do.
When the animation isn't interactive, you could use setTimeout to hide the canvas after a fixed time-period
You could consult the documentation of the tool you used. Maybe it has an option for doing this.
When it has no such option, you could bother the developers to add one, or when it is an open source tool, add such an option yourself.

Related

Faster image changing in JS

I have an audio player I built with HTML5 and JavaScript.
Clicking on the play button tells JavaScript to play the audio and change the src on the play button image (play.svg) to the pause.svg icon. The slowness here is noticeable. Takes time to go to the server and fetch that image.
What's a faster way to change the play button to a pause button?
The question is quite broad, but to give you some ideas:
You could use two image tags and show / hide them on the page.
Use a CSS sprite and changing the CSS class
Preload the SVGs using Javascript
Without seeing your code I don't know what the best solution for you is but one of these options should cover what you are looking for.

Kinetic Js canvas video with javascript

Can anyone show me an example of the code used to place video on a canvas with javascript. I just need a video that loops, with a play/stop button. Thanks.
Canvas tag and KineticJs lib aren't make to place a video (you can always set each frame, but this is quite dirty, however you can see example here : javascript video canvas).
Better use the html5 video tag instead. You can see all that you need for this here :
http://www.w3schools.com/html/html5_video.asp

Processing.js blot onto entire webpage?

My friend has a Flash script that draws Pacman on top of his homepage. The bug is that the flash animation doesn't let him click on his page.
I'm trying to convince him to use Processing.js instead, but I'm not sure whether even Processing can blot on arbitrary parts of a webpage (e.g. by using a canvas the same size as the page but letting clicks through).
Processing-specific issue: Filling the canvas (e.g. background(white);) obscures any HTML elements that might have displayed under the canvas.
Suggestions?
Just use two or three animated GIF's for the PACMAN image... and have javascript move a DIV with position: absolute; z-index: 10000; across the page.
You can look into jQuery to ease up things.
I believe Flash either can't implement the mouse-trail or it is far more difficult than JS. See this tutorial : http://www.kirupa.com/developer/as3/dynamic_mouse_trail_flash_pg1.htm , where the mouse-trail demo is stuck in a box. I think because Flash is an all-or-nothing app. You can't truly mesh it in with the browser(i.e. Flash doesn't fully work with the DOM).
This is textbook JavaScript though.
See this page for more info on JS vs. ActionScript - http://positionabsolute.net/blog/2007/04/actionscript-vs-javascript.php

How do I put a clickable image over a QuickTime video on a web page?

I have a website that runs on WordPress. There is a DIV in the header that contains an embedded QuickTime video (controls are turned off and need to stay like that). I have an image that is supposed to go over the video, and when the user clicks on it, the video should be revealed and play.
I think that if I messed around with the CSS and Javascript for long enough, I could make the image go away and revel the embedded video when clicked on, but I don't know how to make the video start on that same "onclick" event. Another note here: I prefer to use jQuery to do this, since that's what I usually work with. But whatever works works.
This is driving me crazy because I can't find any good information on how to do this! Thank you so much in advance for helping me out.
If you already have a DIV that contains the video, you can create another same-sized DIV that contains your image. Finally, set the image DIV with higher z-index and float it over the video DIV.
I think this should work.
There's really no good way to do this when rendering the video using the QuickTime plugin. Plugins are optimized for performance and typically render above the rest of the "native" elements within your page.
I seem to recall there's a wmode="transparent" attribute or "opaque" that was introduced recently to the plugin similar to what's used with the Flash plugin, but the performance will typically suffer because the plugin renderer will often need to switch to rendering in software as it composites the video with the element you have on top of it, and possibly elements beneath it as well.
The easiest thing to do is to simply use a video element to play the media you want on your page. At that point it is an element like any other on the page and interacts seamlessly with the z-index ordering of positioned elements.
An example of the usage is here: http://dev.opera.com/articles/view/introduction-html5-video/
You may need to nest differently encoded videos as video elements in the page so various user agents with support for different codes can play the video. But just adding the video element and pointing it at your current QuickTime video will work as well as a simple object using the QT plugin.

How do I make it so that there is no "Ghost" when I drag an image in Firefox?

When you drag an image , there is a semi-transparent ghost image that follow your mouse when you hold it down.
Is there some way to apply CSS/JS to remoe this effect on a certain portion?
The easiest way is to set very large x and y coordinates to setDragImage to its away from the screen. For example:
element.addEventListener('dragstart', function(event) {
event.dataTransfer.setDragImage(element, -99999, -99999);
}, false);
The actual element you pass to setDragImage doesn't really matter. We use the same element here for convenience.
The only way to disable that in the browser (It does the same thing in Safari) is by returning false from the onmousedown event on the img element (or event.preventDefault()) and by handling the rest of the drag operation with javascript.
Pretty much every major JavaScript library has support for 'dragging' and 'dropping'. You could use their code as a starting place or just use it outright if you already are using a library on your page.
Just add attribute draggable="false" to the image. Also, add a container div.
E.g.
<div draggable="true">
<img draggable="false" src="your/path/to/image.png"/>
Optional Text
<div>
Also, add
function handleDragStart(e) {
// other code
var dragIcon = document.createElement('img');
dragIcon.src = 'another/image/path.png';
e.dataTransfer.setDragImage(dragIcon, -10, -10);
// other code
}
You could try using css background images instead of actual images with the img tag.
You need to return false from the ondragstart event. I had this issue myself, and that's how I've solved it. It's an issue in IE7 as well. The problem is IE's drag and drop api, its standardisation into html5, and firefox's subsequent implementation of it.
Others suggestions of using a javascript library for drag and drop won't work. (I was already using jquery UI), as this is a recent thing in firefox, and jQuery UI doesn't seem to account for it.
I'm afraid it's the browser behaviour/feature. I'm not sure of any specific FF CSS style which can handle that.
You might want to modify the Firefox's code to have your own firefox. If you are looking for some means to do it non-programmatically, I guess you have to post in superuser.com :P
There is be a Firefox option in about:config to turn this off - nglayout.enable_drag_images - but obviously that will only work for you. I'm guessing you want to remove it for all visitors?
If you want to do drag & drop, maybe try jQuery UI or another JS library? You should be able to move other elements quite easily, and you could use a background image like Tim said on one of those.
Another advantage to that is you can use CSS sprite effects to reduce HTTP requests. I made a jigsaw puzzle with jQuery UI, which is actually only one image, but it looks like several.

Categories