I have created a simple html-based web-page consisting of a form and some text, plus a canvas. I would like to print the page including the canvas on a piece of paper, the problem is - the canvas will not show in the print-out. Is it something I have missed in how to handle the canvas?
I am currently using Opera, any knowledge whether other browsers handle this better?
what you need to do in this case is, have a special print view, where the canvas gets replaced by an image file, which then can be printed out easily.
have a look here: Capture HTML Canvas as gif/jpg/png/pdf?
You need to use the .toDataURL() method to convert the canvas to an image, which you could place on top of the canvas itself for example, prior to printing. Maybe make a print button on the page, which does that stuff, then prints etc...
Related
I'm trying to make a website where you can drag body parts to make a character do a pose. I'm currently using Canvas and FabricJS and I want my images to have 'body parts'.
This video (watch in slow speeds) showcases exactly what I'm after.
The video above shows that when double-clicking on a body part, it will move to wherever you move your mouse to. The highlighted part is the part that will be movable. There are presets and things that would be useful but at the moment, I'm only looking for if such a thing is possible.
If there is no way to do it with Canvas or Fabric, do you know of any libraries I can use to get this to work?
I'm new to the canvas element of html5. I'm specifically wondering when you should put an existing img element inside of a canvas element.
What's the benefit or appropriate use of this?
I've been reading Dive into HTML 5 and didn't quite get what I was looking for in their concluding statement on the topic of canvas:
The simple answer is, for the same reason you might want to draw text
on a canvas. The canvas coordinates diagram included text, lines, and
shapes; the text-on-a-canvas was just one part of a larger work. A
more complex diagram could easily use drawImage() to include icons,
sprites, or other graphics.
An image tag is best used for a static piece of imagery.
Canvas is, to quote the HTML5 working group, "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly."
So, you can slap an image onto a canvas, but that is probably to augment some other piece of work you're creating, like a chart or a game graphic.
UPDATE AFTER YOUR UPDATE
So, if you want to create a really complex chart that tracks stock performance in real-time, you could use the canvas to draw the various bars of the graph, and then also use drawImage() to place company logos on the canvas to indicate which bar belonged to which bar.
Where img does the job, use that. canvas is a very powerful tool indeed, but:
While it's supported by a large portion of browsers today, img is still much more widely supported.
If you need to cater to users with JavaScript disabled, canvas cannot be used; canvas needs JavaScript to operate, whereas img doesn't.
That said, if you need something that only canvas can do, feel free. For example:
Do you need to load an image and then let users warp it or draw on it? A canvas would do quite nicely there.
Do you need to dynamically draw some charts and graphs? canvas would work well there, too.
When you have no need for the more advanced capabilities of canvas, though, and just need to display images, img is the most obvious and compatible choice.
I have a canvas where I manually create rectangles to build a full individual chart diagramm. Doing some coloring and text placing etc...
How can I easily tell a certain area to hide itself and show again?
Can there be a object orient approach to divide the canvas somehow in areas?
I don't think that there is a solution that works the way you want. Canvas element don't keep track of areas are elements like you know it from the dom. There are some things you can do:
Think about using svg. SVG works more like html and can be manipulated via javascript/dom and css.
Redraw the whole canvas with the elements you want to display. You don't have to do this manually. Some framework like paper.js or kinetic.js will help. These framework also have feature like layers.
The canvas element has the api functions getImageData and putImageData. With these functions you can save an area of the canvas into a javascript array and blank the area using the canvas drawing functions. When needed, you can redraw the area with the putImageData function.
Is it possible to create a html element inside a Canvas, draw it and than make it, for example rotate using CSS3?
And if it is, does it follow the Canvas settings (for example, lighting of some sort)?
Just a thing that popped into mind, might make an application i'm working on a lot lighter.
No. Any content inside canvas element is only displayed when canvas isn't supported.
I think we can only use css3 operator in canvas and not inside canvas, in some element like img or div:
I think it's possible Look at:
http://christianheilmann.com/2011/09/05/animating-with-canvas-and-creating-css3-animations-with-javascript/
Here is a link for a great Blender 2.6 output plugin that exports a CSS3 HTML page for viewing in your browser. I'm looking to also utilize Jmpress for presentation. http://sokra.github.com/jmpress.js/#/home
I'm using the Blender script now and it works very well (no crashing or freezing). The HTML produced displays fine, now I'm connecting Jmpress to get a final product.
I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().
Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library:
http://cburgmer.github.io/rasterizeHTML.js/