I am following bing map concave example from this link
http://blogs.bing.com/maps/2013/04/10/html5-canvas-pushpins-in-javascript/
I am wondering if it is possible to add a text inside concave pushpin? I have tried with
context.font = "15px Arial";
context.fillText("33", 5, 50);
but it shows text underneath the pin not inside the pin.
I can add text to normal push pin but not sure if it is possible with concave;
var offset = new Microsoft.Maps.Point(0, 5);
var pushpinOptions = { text : '1', visible: true, textOffset: offset};
You have to draw the text on the canvas. The HTML5 canvas pushpin class overrides the default template for pushpins and replaces it with an HTML5 canvas. Anything you want to display on the pushpin has to be drawn on the canvas. Here is a simple example:
context.font = "30px Arial";
context.fillText("Hello World",10,50);
Related
I am trying to add fixed text in a-frame. I can add a a-text tag like this:
<a-camera wasd-controls-enabled="true" position="0 1 0" look-controls>
<a-text position="0 0 -1" value="Test" color="#fff"></a-text>
</a-camera>
But this method does not make the text fixed to the side of the screen so the text will overflow when I change the screen size. Is this even possible?
It's generally best practice to add the text to the scene rather than to the camera. This gives the user the option to look in either direction so they can see everything.
https://aframe.io/docs/0.8.0/components/camera.html#fixing-entities-to-the-camera
If you still decide to anchor the text to the camera, the simple solution would be to make sure that the text is at a distance great enough that all of it can be seen comfortably at the smallest screen size (vertical phone orientation, etc.).
A more complex solution would be to change the size of the <a-text> primitive (or containing entity using the text component) on the window.resize event, and adjusting the text container accordingly. This can be done by creating a custom component.
Here is a rudimentary example:
AFRAME.registerComponent('resize-text', {
init: function() {
var self = this;
window.addEventListener('resize', function(e) {
var height = window.innerHeight;
var width = window.innerWidth;
// console.log('resized!', height, width);
self.el.setAttribute('width', ( width / 100 ));
});
}
});
And here is a demo of that code in action: https://codepen.io/dansinni/pen/pVJmQg
Resize the window or drag the center divider and you will see that the text size changes.
Hope this helps.
I am trying to draw text in canvas but the drawn text has jaggies especially in chrome 31.0.1650.
I have tried -webkit-font-smoothing:antialiased,text-shadow but all go in vain.
How to tackle this problem?
Thanks in advance.
Here is the style code:
<style>
#my_canvas{
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-indent: -9999px;
}
</style>
The code in body:
<canvas id="my_canvas" height="300" width="2200"></canvas>
<script>
var canvas = document.getElementById("my_canvas");
var context = canvas.getContext("2d");
context.imageSmoothingEnabled =true;
context.fillStyle = "BLACK";
context.font = "bold 100px Arial";
context.fillText("A quick brown fox jumps over the lazy dOg", 50, 200);
</script>
This is an issue with the Chrome text engine.
There is a technique you can use to get around this though:
Setup an off-screen canvas double the size of the on-screen canvas
Draw the text to the off-screen canvas in scale: font size and position
Draw the off-screen canvas to main canvas scaled down (half in this case).
Live demo here
The difference is subtle (as expected) but improves the quality. Here is an enlargement:
Sidenotes: CSS does not affect content of the canvas, only elements. Image smoothing is enabled by default and affects only images but not text or shapes (we will use this though for this technique).
var scale = 2; // scale everything x2.
var ocanvas = document.createElement('canvas');
var octx = ocanvas.getContext('2d');
ocanvas.width = canvas.width * scale; // set the size of new canvas
ocanvas.height = canvas.height * scale;
// draw the text to off-screen canvas instead at double sizes
octx.fillStyle = "BLACK";
octx.font = "bold " + (100 * scale) + "px Arial";
octx.fillText("A quick brown fox jumps over the lazy dOg", 50*scale, 200*scale);
// key step is to draw the off-screen canvas to main canvas
context.drawImage(ocanvas, 0, 0, canvas.width, canvas.height);
What happens is that we are introducing interpolation in the mix here. Chrome will draw the text very rough also to the off-screen canvas, but after the text becomes rasterized we can deal with it as an image.
When we draw the canvas (aka image) to our main canvas at half the size, interpolation (sub-sampling) kicks in and will low-pass filter the pixels giving a smoother look.
It will of course take more memory but if result is important that is a small price to pay nowadays.
You will probably notice that other values than 2 doesn't work so well. This is because the canvas typically uses bi-linear interpolation rather than bi-cubic (which would allow us to use 4). But I think 2x serves us well in this case.
Why not using transform, ie. scale() ? Chrome's text engine (or the way it's used) does not rasterize the text at 1x and then transforms it. It takes the vectors, transforms them and then rasterize the text which will give the same result (ie. scale 0.5, draw double).
We can use canvas for drawing custom shapes.
I need to draw my shape dynamically as a canvas item and place it for a div background item.
My pages generates run time and they aren't static html code so i can't use tricky methods.
What's your idea?
Regards
Looks like you searching for toDataURL().
UPD:
Here a usage exaple:
dataUrl = your_canvas.toDataURL();
your_div.style.background='url('+dataUrl+')'
Live demo on jsFiddle
Sounds like you need canvas2image: https://github.com/hongru/canvas2image
You can create a canvas and then get the contents as a png:
var canvas = document.createElement("canvas");
....do stuff here...
var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height);
Then all you need to do is use the png as a background image:
document.body.style.background = "url(" + img.src + ")";
Please correct me if any of this is wrong.
Recently I started working on HTML5 Canvas, I'm new to it.
I've a problem as follows:
I'm loading a Canvas with Body Chart Image (Predefined Image) and on that User will Draw some lines, shapes, etc.
After that I'll generate an image object as follows
var canvas = document.getElementById("MyCanvas");
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = dataURL;
But, Here it generates only those elements which are drawn by users (lines, shapes) as PNG Image. It won't take that Predefined canvas background Image.
I need to generate a PNG image which should include both the Canvas background Image as well as User entered drawing elements.
How to do this?
Try to actually draw you image onto your canvas, utilizing these functions:
var canvas = document.getElementById("MyCanvas");
var img = new Image();
img.src = 'pathToYourImageHere';
canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */
When you now try to save it, it should also save your background image.
EDIT:
In response to your comment:
You can circument your layering problem by using two different canvases. One for the image, and one for your drawing. Then layer them on top of each other using absolute positioning.
You can read more here: Save many canvas element as image
EDIT2:
But actually you shouldn't have a layering problem, since the following code will first draw the image and then draw the arc, and the layering will be fine:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "somePathToAnImage";
context.drawImage(imageObj, 50, 50);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "red";
context.stroke();
Even though the layering is fine, you will be better of by using two canvases, in case you would like to only save the drawing, without the background. You can always save both into a new canvas and save that, when you only use one canvas you'll have a hard time separating the drawing from the background.
This is because the image needs time to load, you have to use the onload function.
imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;}
if (imgLoaded) { /*you draw shapes here */ }
Well, the problem may be a simple one but I can't figure it out. I have an image loaded into BitmapData. now I want to take text from a textinput and put it on the BitmapData. Basically it's drawing a text on the BitmapData and get the result as another BitmapData that will consist of the original BitmapData with the text drawn over it on a specified position. What's the best way to achieve this in flex?
To put the text inside a bitmap you can do:
var channelName:TextField = new TextField();
channelName.textColor=0x000000;
channelName.antiAliasType = AntiAliasType.NORMAL;
channelName.alpha=1.0;
var txtFormat:TextFormat = new TextFormat("SansSerif",14,0x000000,true);
channelName.setTextFormat(txtFormat);
var bitmapdata:BitmapData = new BitmapData(
channelName.width, channelName.height, true, 0x000000);
bitmapdata.draw(channelName);
You can't draw over bitmapdata per say, but you could compose it from the data. Since you have BitmapData, it's easy enough to change it to a bitmap (var bitmap:Bitmap = new Bitmap(bitmapData);) and then add it as source for an image.
Now that you have an actual image on the stage, you can now add text above that using what you like (text, label, textarea, etc) and then you can do a Bitmap.draw over the dimensions of the image to get the pixel information back into a BitmapData (under Bitmap.bitmapData).