I am using the canvas and HTML5. I have an icon in my canvas and a text and when I am trying to add shadow in my Text with this code:
ctx.shadowColor = textShadowColor;
ctx.shadowBlur = 1;
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
the shadow goes also to my image. What could be the problem. As I see this shadowColor goes on the canvas and not really on the text. Should a have different canvas for the text and the image?
Thanks in advance
Are you drawing the text or image first?
If you're drawing the image first there should be no problem:
http://jsfiddle.net/NAanu/
If you're drawing the text first you need to clear the shadow so the picture doesn't get drawn with it also. Here's an example of drawing the text with a shadow first:
http://jsfiddle.net/NAanu/1/
I use save and restore to save and clear the shadow state from the context. You could just set them all to their default values instead, though.
When you set properties on the context you need to think of it like loading up a paintbrush with paint.
Setting any context property, like the shadowColor to red is like loading red paint onto the edge of your paintbrush. Anything you paint from then on will have red on it.
The only way to stop that is to clean your paintbrush (set the color and shadowOffset back to their defaults) or to use save() and restore(), which is saying "remember that my paintbrush was once clear, so later I can recall this clear paintbrush to use again".
Related
The idea is simple, create a star with text and rotate it.
But its not smooth after making a quick script
here is my fiddle
The star is moving oke, but the text is shaking like a snake :)
Cause
The reason why this happening is due to the browser's text rendering engine. They are translating each point in the text path using the same rotation matrix but due to the engine you will get rounding errors in there causing the text to "jibber".
This is not only happening for canvas but for CSS transformations as well, with text.
Solution
Simply render the text to a canvas "layer" and use that as an image which you rotate instead of the text itself. This rasterizes the text in its normal position and the transformation happens on the bitmap instead which most browsers handle pretty well.
Here is one example integrating the answer I linked to in the comments. I'm showing only the main text as it works as a comparer as well, before and after:
// canvas layer
var tcanvas = document.createElement('canvas'); //tcanvas must be in global scope
var tctx = tcanvas.getContext('2d');
tcanvas.width = canvas.width;
tcanvas.height = canvas.height;
tctx.translate(250, 250);
tctx.fillStyle = "black";
tctx.font = "bold 60px Arial";
tctx.textAlign = 'center';
tctx.fillText('€ 1215,34', 0, 0);
Now the layer is ready and we can replace the text drawing methods with a single drawImage instead:
c.drawImage(tcanvas, -x, -y);
Result of this modification
To draw the "extra" just move those lines down to the layer creation as well. Note that tcanvas in the example must be accessible globally.
If the rotation speed of the text is not intentional just remove the second call to rotate you have there before rendering the text.
Tip: instead of redrawing gradients and the star just render it once to another layer and rotate that as an image as well. This will be much more efficient. You could also avoid save/restore (which are relative costly) by just accumulating the step on rotate() itself and use setTransform to transform the matrix using absolute values.
Ways to optimize memory usage: for text layer use a canvas size where the text fits in exact (don't use fixed values as text size may vary in size and position from browser to browser depending on the text rendering engine), same for star if you go with a layer for that as well.
Hope this helps!
The shake in your text comes from the fact that the context is not in a proper state when you draw the text : you just did quite some operations on it before.
I just added a
c.restore();
c.save();
c.translate(x,y);
before the text part of your code, and the text is solidly hung to the star now :
http://jsfiddle.net/gamealchemist/xUr4f/1/
Edit : There are in fact 2 issues at stake here : 1) the text rotation is not quite on track with the star and 2) the rounding of the text coordinates makes the text shake.
Both Chrome and FF exhibit 1) of course, and with a clean context 1) disappear on both.
For 2) : Chrome is ok with non-integer coordinates text, but FF does round, which creates a shake on a rotating text.
Only solution i see it to 'print' the text on a canvas, then have the canvas rotate. I did it for the 'extra' in this fiddle :
http://jsfiddle.net/xUr4f/4/
There's a loss of quality compared to the fillText, but unless the coordinates rounding can be avoided, it seems as the best solution.
I'm trying to create a TextField which will look smooth enough when animated. The only option, when I can get smoothly-animated textfield, is setting antiAliasType property to AntiAliasType.NORMAL; But I'd like to play with text antialiasing to make letters a little bit thicker. So I change the antiAliasType to AntiAliasType.ADVANCED.
After that the textfield looks jumpy when animated (it looks like glyphs are being snapped to pixel-grid). Change of property gridFitType of the textField doesn't make any sense.
Has anyone achieved smooth text-field animation when antiAliasType is switched to AntiAliasType.ADVANCED? (The jumpy text occurs when switching to TLF text fields either)
Here is my short code:
var p:TextField = new TextField();
var font:Font = new Font1XXX();
// font is embedded int the library and exported as Font1XXX class
var tfor:TextFormat = new TextFormat();
tfor.font = font.fontName;
tfor.size = 15;
tfor.color = 0xFFFFFF;
p.defaultTextFormat = tfor;
p.autoSize = TextFieldAutoSize.LEFT;
p.antiAliasType = AntiAliasType.ADVANCED;
p.gridFitType = GridFitType.NONE;
// change to GridFitType.NONE does not make any sense;
p.selectable = false;
p.embedFonts = true;
p.text = "HELLO WORLD";
addChild(p);
If you don't need selectable text, draw the textfield into a bitmap and add the bitmap to the stage instead of the textfield.
Every text in flash is snapped to whole pixels, resulting in any animation in regards to them will feel "jagged".
Workarounds are to convert any "static text" into a shape and place inside movieclip or to "copy" the text into a bitmap and animate that bitmap. Depending on what type of animation you want to do, different solutions are required for best visual experience.
For instance, scrolling text, it would probably be best to cache it as bitmap and then move it along the axis.
Scaling up/down a text (if it is scaled a lot). This sucks, I haven't found a good way to resolve this without visual artifacts. Best solution is usually to copy the text into another clip, hide the text and then animate quickly or try to cover it with other effects so focus is taken away from the text itself.
Let's say that I use some HTML5 markup:
<canvas id="e" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.font = "bold 72px JerseyLetters";
context.fillText("Bulls", 50, 100);
</script>
To make some cool text like this:
Then I decide I want these letters to fit into an envelope that looks like this:
Hoping to get something like this:
How would I go about (1) defining an envelope like the one above and then (2) putting the text in the envelope using HTML5 Canvas to get the result?
I am open to either something that directly places text in the envelope or a solution that first creates an image and then fits the image in an envelope.
Thanks!
EDIT
I added the tags "webgl" and "three.js" to this question on the advice of #markE. I will research those two packages in the mean time as well. I'm very new to .
webGL way:
Do it as a image-processing with pixel-shader.
Render text with 2d canvas, bind webGL texture with buffer and fill texture with canvas image (rendered text). Have prepared envelope that actually maps the area that envelope holds and also every pixel play role of the UV coordinate from the first image. Running that as pixel shader, you have image-to-be-squeezed and envelope (uvs) you'll output final image. That way, it's completely font and text independent. You could even probably make one image-processing step more so you could load any envelope shape and process it on spot, so it becomes font, text and envelope-shape independent.
I'm not sure how well did I explain this.
Hope this helps, though.
SVG provides these sort of text transforms. See http://tavmjong.free.fr/SVG/TEXT_PATH/TextPath.html
EDIT: This link appears to be converting the text to actual SVG. Probably not going to be helpful for you, sorry.
I am currently attempting to make a button which is in the shape of a trapezoid.
I found a method of creating the shape which involved CSS making borders and such.
The CSS method worked in the way that it made the shape, but I ran into an issue where the whole element is contained in a rectangle, so when you click in the white spaces outside of the trapezoid it will still register as a click in the element.
In short, I am trying to make the HTML element to be the shape, of a trapezoid, not just the visible shape itself. Thus when a user clicks any area around the button that is outside the visible Trapezoid, but may be within the actual boundaries of a button rectangle, it should ignore the click. Thanks.
Edit:
It was asked that I show an example of what I mean.
http://jsfiddle.net/MichaelMitchell/aR72g/9/
In this link, there is the red trapezoid, but you can see the background color is also green, and when you were to click the green it still activates an onclick. In other word, I only want the red to be able to trigger the onclick.
You cannot have other clickable areas than rectangles in HTML if you are not willing to do the trickery involving map attribute and image (see docs), but even then your image will always wrapped in rectangle bounding box (so you can only pretend to have different shape by using images with transparency and said map).
You can work around this by giving it an onmousemove event that determines whether or not that coordinate is actually inside the trapezoid and adds/removes the onclick event accordingly. Something like this:
<figure id ="trapezoid" onmousemove="trapezoidMouseMove(event)">
<p>Button</p>
</figure>
<script>
function trapezoidClick(e)
{
//Whatever you need it to do
alert("inside");
}
function trapezoidMouseMove(e)
{
//Fill in the angle of your trapezoid
angle = Math.PI / 4;
insideLeft = e.offsetX > Math.tan(angle) * e.offsetY;
insideRight = e.offsetX < e.toElement.offsetWidth - Math.tan(angle) * e.offsetY;
if (insideLeft && insideRight)
{
e.toElement.style.cursor = "pointer";
e.toElement.onclick = trapezoidClick;
}else{
e.toElement.style.cursor = "default";
e.toElement.onclick = null;
}
}
</script>
Is it possible to only trigger a div's mouseover when the cursor is over an opaque part of the div's background image? Perhaps via Javascript?
All I can find with Google are old IE PNG fixes.
This looks like a similar question to this one: Hit detection on non-transparent pixel
I suppose this could also be done for background image by getting the attribute with jQuery:
$('#myDiv').css('background-image');
I haven't personally done this, but it seems like a viable solution. This will only work for modern browsers, but you should be able to make it back-compatible with excanvas.
It is possible, just not very easily. You'll have to use a lot of Javascript.
You'd want to attach to your <div>'s onmousemove event, which returns the X,Y coordinates of the cursor. Your event handler function would then test to see if the cursor is in the correct place in order to trigger an alternative onmouseover event.
Implementing the "is the cursor over an opaque pixel or not?" test can be done two ways: the first is to create a simple mathematical expression (say if the opaque parts of the image make neat rectangles, circles or polygons). The more difficult (and less browser-supported) way is to load the background image into a Canvas object and then get the current pixel value's opacity figure and take it from there, like so:
var pixel = canvas.getImageData(x, y, 1, 1).data;
var alpha = pixel[3]; // assuming RGBA
if( alpha > threshold ) onMouseOver(); // raise the event
Another alternative is to create an entirely transparent div (or some other element) positioned and sized so that it only covers the opaque part of the div below, then just test the mouseover of that element's box.
It's a bit of tweaking but why don't you add a class to your opaque div, and use JavaScript to check for it?
In jQuery:
$('div').mouseover(function(){
if ($(this).is('.opaque')) {
//Some actions
}
});