Hi am making a small HTML5 canvas demo.
I initiated the canvas using modernizer from O'Reilly's HTML5 text.
This is for iPad so my canvas is 1024 by 768.
I then load in a background image in my DrawScreen function.
var backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
backgroundImage.onload = function(){
context.drawImage(backgroundImage,0,0);
}
I want to add text to this then. So I do:
function drawText(){
context.fillStyle ="gray";
context.font = "28px Helvetica";
context.fillText(message, 260, 700);
}
I then call both functions:
DrawScreen();
DrawText();
However my background image totally over writes my text. Or is on top of it. If I disable DrawScreen(); I can see the text. Changing the function order doesn't make a differnce...
How to do this? I feel so stupid that am stuck on something that seems so elementary.
Thanks
The problem is that your image is being drawn after -- and therefore on top of -- your text. This is because of the time it takes the image to load. Basically, what's happening is this:
You call your DrawScreen function
You start loading your background image by assigning the src attribute
You assign the onload() handler to fire once the image has finished loading.
DrawScreen exits, having completed all its work
You call DrawText, which immediately draws the text
At some point later, the image finishes loading, fires the onload() event, and you draw the background image.
I'd suggest restructuring your code so that all the drawing is kicked off by the successful loading of the image. That way, nothing asynchronous will be going on, and the image will be drawn, followed by the text.
Here's a quick example, on jsFiddle.
Related
I have a .gif that is animated to begin from the left of the screen to a few hundred pixels to the right. The animation lasts 5 seconds and I have set it so it doesn't return to its initial spot.
What I want is for the .gif to start once the CSS animation is finished. I realise that some forums give codes for a mouseover effect so that it changes from a .jpg source of the animation to the .gif. But I can't find anything that gives you a timer instead of mouseover.
It's been a few years since I've worked on websites and I've forgotten so much, so this has been a struggle.
Any help is appreciated. Cheers.
The way to change an <img> source via javascript is fairly simple, the syntax looks like img.src = "new/source.gif".
Having the change to a GIF match up with the end of your animation can be achieved a variety of ways, but I would do it by adding the animation to your element as a class at the same time you set a time out in your javascript.
HTML
<img id="image" src="path/to/static.jpg">
JAVASCRIPT
var img = document.getElementById("image");
function photoSwitch(){
// begin your CSS animation by applying class
img.setAttribute("class", "some-animation");
// have javascript wait 5s before switching the image source
setTimeout(function(){
img.src = "path/to/moving.gif";
},5000);
}
photoSwitch();
I would like to customize the design (view) of the extension action button of my Chrome Extension.
I would like to know if it is possible to use html and not only a picture. I would like the button to show text and number. i would like to be able to update the text and number.
I did look it the happy if i could generate an image with the needed informations and change the default button icon. But i did not found anything.
In advance thanks
To create a dynamic browser action icon, use the HTML5 Canvas element; create a canvas, add images and/or text to it, then pass the canvas' image data to chrome.browserAction.setIcon.
Here's a small example (please note that this uses jQuery to create the canvas element):
$('body').append('<canvas id="myCanvas" width="19" height="19"></canvas>');
var myCanvas = document.getElementById('myCanvas');
var context = myCanvas.getContext('2d');
context.fillStyle = "blue";
context.font = "normal 9px Arial";
context.fillText("foo", 0, 19);
chrome.browserAction.setIcon({ imageData: context.getImageData(0, 0, 19, 19) });
Keep in mind that you only have 19x19 pixels to work with, so the font probably needs to be really small.
Depending on your needs, you could get creative with creating text as images and adding images to the canvas instead, and/or using chrome.browserAction.setBadgeText.
For further reading, see:
How can I write text on a HTML5 canvas element?
Drawing text using a canvas
I have an image in Flex I want to change the image with actionscript to show some other image say every 3 seconds or so. I also want to make transition between the image and the next one for instance fade in/out. What is the best way to do so?
If you want to fade in the new image while at the same time fading out the old, use a Parallel object:
var p:Parallel = new Parallel();
var fadeOut:Fade = new Fade(image1);
fadeOut.alphaFrom = 1;
fadeOut.alphaTo = 0;
var fadeIn:Fade = new Fade(image2);
fadeIn.alphaFrom = 0;
fadeIn.alphaTo = 1;
p.addChild(fadeOut);
p.addChild(fadeIn);
p.duration = 1000; //time in ms
p.play();
Picking things up when you already have an image up:
Use the Fade effect on the first image. Make its alphaFrom="1.0" and its alphaTo="0.0". It willthen dispatch an EffectEnd event. In your handler for that event, switch the target image source and call another Fade effect, that switches the alphaFrom and alphaTo values and switches the image source. Then just use a timer or setTimeout (or setInterval) to stay on the image a certain length of time, then rinse and repeat. Look at the example in the link provided above. It's really not hard.
Use a timer to change the image source attribute in conjunction with Fade Effects.
The general gist is:
Timer Ends
Start Fade Out Effect
On Fade Out Effect complete, change image source
Start Fade In Effect
On Fade in Complete, restart timer
I never did stuff like this before! Tried to google around but couldn't find anything useful!
So: how is it possible to make text appear on top of an image (slideshow) in Flex using action script (can it be done another way)?
(I already found action script code that does implement the slideshow but how to show some dynamic text too?)
Thanks in advance!
The most simple method would be to just place a textarea on top of your image.
If it's dynamic text, make sure that you embed the font. If you're running into weird behavior with the font, for example, if it doesn't show up, then make sure that the font is embedded.
The font also needs to be embedded if you intend on scaling it, rotating it, etc.
Using ActionScript alone:
var sprite:Sprite = new Sprite();
//let bmp be an image of size 100x100
//loaded thru Loader class or embedded at compile time
sprite.addChild(bmp);
var tf:TextField = new TextField();
//set background/color/font etc here
tf.text = "100x100 image";
sprite.addchild(tf);
tf.x = 50;
tf.y = 50;
Make sure you addChild text after the image - otherwise image will come on top of the text and you won't see it.
Using flex: Use Canvas or Panel with absolute positioning to put things on top of each other.
<mx:Canvas>
<mx:Image source="image.png"/>
<!--Make sure Label tag is after Image tag-->
<mx:Label text="my image" x="20" y="20"/>
<mx:Canvas>
I'm working on a JavaScript image resizing feature which rely on the IE only DXImageTransform addon.
Wanting to address modern browsers as well, I gave a shot to canvas, with pretty good results.
However, I face an issue in my resize function, which is the following:
function Resize(oObj, flMultiplier)
{
var canvas = document.getElementById('canvas');
var canvasContext = canvas.getContext('2d');
oObj.style.visibility = 'hidden';
canvasContext.clearRect(0,0,canvas.width,canvas.height); // clear canvas
canvasContext.fillStyle = 'rgba(0,0,0,0.4)';
canvasContext.scale(flMultiplier,flMultiplier);
canvasContext.drawImage(oObj, 0, 0);
}
If my image becomes bigger than the canvas item, then one will see only a portion of the image, which is bad.
I tried to tweak the canvas size at runtime, but if affects the display of the resized image.
So I ended up declaring a big canvas element, which is pretty OK, except that the css overflow of my web page is adjusted on my biggest element, and not on my resized image, which is a pain.
So I guess there are two ways to solve my problem:
Try to exclude the big canvas element from the overflow scheme
Try to update the canvas element size when resizing (I may have missed something there)
I haven't tried that myself, but perhaps you can create a canvas element out of the Dom, with document.createElement. It could be of arbitrary size without disturbing the display.
Now, I lack context (why do you resize images this way instead of using width and height attributes, among other questions) so maybe I am missing the point.