html canvas-color and images - javascript

I'm trying to make a menubar type of thing for my website.
I tried google but idk what I should search on...
I want it to be a kind of rainbow and when the user hovers over it the bar should expand and it should give a short description of the page they will be going to.
I did it with and javascript:
<canvas id="purple" width="50" height="400"></canvas>
js:
var canvas = document.getElementById('purple');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(0, 0, 100, 500);
context.fillStyle = 'purple';
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'none';
context.stroke();
and that with all 6 colors.
No problem so far for me.
But now I want to put in the text... But I keep failing.
This is my JSFiddle:
http://jsfiddle.net/gY9wk/
should I keep using or something else?
O and another question: Can I remove the white spaces between the bars?
This is less important than the first question but just asking...
Thanks in advance!
Robin van der Noord.

Using canvas for something like that might be a little bit too expensive.
There are two ways to create text on them - using canvas to draw text or using another HTML element on top of each canvas and put the text in it. I recommend the latter. Here is an example using a div container and a span inside it (as a canvas sibling) to show the text: http://jsfiddle.net/gY9wk/9/ (added a few effects to make it look nicer)
The new structure is this:
<div class="item">
<canvas id="red" width="50" height="400"></canvas>
<span>Hey there</span>
<p>This is a description</p>
</div>
Again, I'd recommend not to use canvases for backgrounds as they are too heavy. A simple 1px-high horizontal line with repeat-y property would do the trick and would look identical. And I especially don't recommend using canvas to render text, not just for the reasons mentioned above, but for SEO as well (web crawlers won't see the canvas-rendered text).
Of course, if you plan to create some animations, then the canvas is the way to go.
And here's an example how to render text on canvas (see the purple one) if you still want to do it: http://jsfiddle.net/gY9wk/10/.
Bear in mind that CSS resizing will stretch whatever is rendered on canvas, and changing the width or height attributes of the canvas element will clear the canvas and you'd need to rerender whatever was on it.
context.fillStyle = 'red';
context.font = "16px Arial";
context.lineWidth = 4;
context.fillText("Hey, I'm rendered on canvas", 30, 30);
Second question, the white space is coming from canvases being displayed inline by default. The easiest way is to set them to:
canvas {display: block;}
and to remove the line break elements (brs).
Like this: http://jsfiddle.net/gY9wk/5/

Related

Dynamic canvas, "moving line" Css and/or SVG

I'm making a UI in Angular6 where I have a list that occupies the left third of the screen with selectable entries that upon selection reveal additional data of that entry.
the additional data does not move but the the selected line in the entries can because the list is scrollable and also selecting it will change which line is highlighted obviously.
I want to make it visually clear to the user that the additional data he is seeing corresponds to the entry selected in the list.
here's what I have now :
as you can see I've already helped out the user visually by highlighting the entry in the list and the whole additional data view in the same light blue
and here's my attempt at sealing the deal in terms of the view's clarity :
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="180">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 20);
ctx.lineTo(400, 180);
ctx.lineTo(400, 40);
ctx.lineTo(0, 0);
ctx.fillStyle = '#9ec7e2';
ctx.fill();
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>
But I'm facing here a challenge I've never faced before : I need it to be dynamic and fluid.
I know I could JQuery-watch both select and scroll and also JQuery get X-Y coordinates of top and bottom corners of relevant divs, then redraw the canvas on every scroll and select call but that sounds extra poor performance-wise, and with a high probability of flashing (re-draws) while I scroll.
not to mention this all sounds extra clunky and poor execution,
Plus I'm fairly certain any resizing of the window or any other easy test would break the illusion.
Isn't there a new more "CSS3-SASS-SVG-Angular6" approach?

How to clear rectangle on Image in Canvas

I need to clear a rectangle Drawn on Image in Canvas with out damage existing image. I can draw small rectangle points and clear that out. But the problem is when I clear rectangle it remains as white small patch on image.
Can someone tell me how to clear a rectangle on image without damage the existing image.
I have used following methods to clear rectangles but didn't work.
1) context.fillStyle ="white";
2) context.clearRect(xCoordinate, yCoordinate, 10, 08);
Thanks in advance!
Canvas doesn't work that way. It's a single layer, its also transparent by default. So with that in mind, you might be able to achieve what you want by simply giving the canvas element a CSS background. That way anything you draw on top of that background can easily be removed and the background will show through.
#backed-canvas{
background-image: url(http://www.placebear.com/300/200);
}
JSFiddle example: https://jsfiddle.net/yLf5erut/
There is one thing you can do.
When create a rectangle on the canvas just get the image data like:
var imgData = context.getImageData(xCoordinate, yCoordinate, 10, 8);
and draw the rectangle.
When clearing out the rectangle just place then image data back like this:
context.putImageData(imgData, xCoordinate, yCoordinate);
I suggest using 2 canvas elements one over another.
So you can have the original image drawn on the bottom canvas with low zIndex, and the top one with highter zIndex can be used to draw / clear whatever needed. This is a common practice, and for more complecated animations you will end up with better performance.

How to remove a drawn arch from canvas

I have been trying to print arc in the html page. How can i remove the already drawn arch from the page?. i have written the below code.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1200" height="1000"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
/*ctx.beginPath();
ctx.arc(600,500,20, 0.5*Math.PI,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(600,500,40, 0.5*Math.PI,2*Math.PI);
ctx.stroke();
*/
var radius=20;
for (i=0; i<10; i++)
{
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(600,500,radius, 0.5*Math.PI, 2*Math.PI);
ctx.stroke();
radius= radius+30;
}
</script>
</body>
</html>
How can i achieve this?.
Call clearRect method:
ctx.clearRect(0, 0, 1200, 1000)
The four arguments are:
axis-X of left top corner of the area to wipe
axis-Y of left top corner of the area to wipe
width of the area to wipe
height of the area to wipe
So with this method, you could wipe either the whole canvas or just a certain part of it.
If you want to remove the whole previously drawn image please take a look at the other anwers. In the comments OP made it clear that this is not what he was trying to achieve. So instead I will answer the intended question:
How do I un-stroke a path?
A bitmap is not a vector graphic. You cannot simply remove or modify things you've drawn previously. By drawing on a canvas you modify the pixel color values of its image data. If you need to undo things you have to maintain a separate data structure with the relevant data yourself.
For example you could create a copy of the image data before drawing something. Then you could return to this snapshot afterwards. HTMLCanvasElement#toDataURL returns the complete image as an url which you can use as the src of an image. Later you can draw this image on the canvas to revert all subsequent changes. HTMLCanvasElement#toBlob does about the same but it returns a blob. This might consume less memory but it's a little more inconvenient to use. The most convenient method is CanvasRenderingContext2D#getImageData. You can even use it to copy only a small part of the image. This is useful if you have a big canvas but only modify pixels in a small region.
Another way to make modifications undoable is by maintaining a detailed list of your steps. For example whenever you draw an arc you store the exact parameters as one entry in the list. steps.push({type: 'stroke', style: 'rgb(0,0,0)', shapes: [{type: 'arc', x: 600, y: 500, radius: radius, from: 0.5 * Math.PI, to: 2 * Math.PI}]}) You can remove, rearrange or modify the elements in this list any way you like and have all necessary information to draw the resulting image from scratch. Basically you've implemented just another vector graphic library.

Is it possible to search draw text on canvas using PDFJS?

I am working on web app in which i have to display PDF file using PDF.JS and there are few area where i have to draw a rectangle and user can click on that which take him to details page. Till now i am able to display pdf and while looking at pdf js i found canvas.js in which all text is draw on canvas using
showText: function CanvasGraphics_showText(glyphs) {} function now i am keeping track of all text those text where i have to draw a rectangle but i am facing some problem to accomplish it. showText function calls many times which creating multiple rectangles. I have done following changes in function
if(glyphs.length ==10){
// common case
var bValue=false;
glyphs.forEach(function(value, index, ar){
var str =['d', 'e', 't', 'a','i','l','='];
if(str.indexOf(value.fontChar)>=0){
bValue=true;
}
});
if(bValue){
ctx.beginPath();
ctx.rect(scaledX, 50, 200, 100);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.font = '20pt Calibri';
// textAlign aligns text horizontally relative to placement
ctx.textAlign = 'center';
// textBaseline aligns text vertically relative to font
// style
ctx.textBaseline = 'middle';
ctx.fillStyle = 'blue';
ctx.fillText("Click", 120, 100);
}
}
glyphs is array of objects and i am searching for values define in str.
Can any one please point me into right direction ?
Thanks in Advance.
It's not really possible to do this directly. Canvas is, fundamentally, a bitmap-based graphics engine: the only things it remembers from call to call are the values of the pixels inside it. You can draw text, but once you've done that, the canvas doesn't know that it's text anymore. That's why you can't search for it inside the image.
The quickest and easiest way around this is to keep track of the text somewhere else. #ZachSaucier's comment mentions this possibility. I see that you're concerned about performance, but the alternative would be to implement some kind of OCR algorithm to extract the text from the bitmap. There's no standard way to do that, so you'd have to implement OCR yourself, and it would be much slower than storing the text in a variable.
Another option would be to use SVG instead of Canvas. SVG isn't bitmap-based, so when you put text into an SVG image, the engine can remember that it's text, and you could search within that. However, drawing things in SVG is very different from drawing them in Canvas, so unless you're already using a library that can work with either one, you would have to rewrite your drawing code. That might not be feasible for what you're trying to do.

HTML5 Canvas not displaying text

I'm learning some game dev with JavaScript, so I wanted to use HTML5 canvas to draw on the screen. The problem is that I can't get it to display text.
You can see my code here (you might be greeted by a prompt asking a name for your chatracter) http://jsfiddle.net/LAmC3/
Essentially i only used:
canX.font = '80pt Helvetica';
canX.fillText(player.getName(),100, 100);
With canX being the context of my canvas which has the same dimensions as the viewport.
If anyone knows why, please let me know.
You're drawing the text in the same colour as the background, set the fillStyle to something new, e.g.
canX.fillStyle = '#FFFFFF';

Categories