This week's book giveaway is in the Servlets forum.
We're giving away four copies of Murach's Java Servlets and JSP and have Joel Murach on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes curves and the html5 canvas Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "curves and the html5 canvas" Watch "curves and the html5 canvas" New topic
Author

curves and the html5 canvas

Grega Leskovšek
Ranch Hand

Joined: Nov 13, 2008
Posts: 53
how can You make draw curves with mouse in canvas and analyze the canvas drawing pixel by pixel and save the canvas in an image format?
Love, Grega Leskovšek from Slovenia


--Always, Grega from Peace refuge
James Williams
author
Ranch Hand

Joined: Apr 18, 2009
Posts: 35
Grega,

Here are the instructions for drawing arcs: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-(paths)

The canvas, like any other element canvas respond to mouse events.

You can save a canvas to an image by calling on the canvas:


For example, to create a png, it would be:


I'm not sure what you have in mind in terms of pixel manipulation but this part of the spec has some information on that.
Grega Leskovšek
Ranch Hand

Joined: Nov 13, 2008
Posts: 53
the last link is not operational, when I click this I do not get a new page?Please update ... And ...
I want to do for my degree a program for teaching pupils how to draw graph functions and I need to draw pixel by pixel a graph that is a test/learn part and before that draw by mouse that graph function and then analyze if the original graph is outside the bold mouse drawing and evaluate the pupil.

Pixel by pixel I mean I need to go through x0y0 to xny0 and then x0y1 to xny1 nad then ... x0yn to xnyn and to see if the graph matches and how much,
I also have a question if the canvas is stored in pnggifjpegbmp whatever how can I load the picture into canvas?

thanks for everything, Grega from Slovenia
James Williams
author
Ranch Hand

Joined: Apr 18, 2009
Posts: 35
Grega,

If the first link works, the second should (and both work for me). It's an anchor on the same page. Try going to the first link and searching for "Pixel Manipulation." The second link contains the function calls to get pixel data which you can then manipulate. Though it's slightly different than what you are asking, here is a tutorial that displays a video file in a canvas and manipulates the canvas pixels. It shows how to apply various effects to canvas pixels.

Images can be inserted into canvases. You can even draw a canvas inside another canvas.

There are a couple different signatures for drawing an image as you can draw a subportion of an image or scale it. The most basic flow to draw an image a (0,0) would be





You can find the other signatures here.
Grega Leskovšek
Ranch Hand

Joined: Nov 13, 2008
Posts: 53
Thanks for the links and I would also be really grateful if You suggested me how should I do this:

map only black pixels (that is the graph function the pupil drew and not also the white background) from canvas 1 over canvas 2 that is canvas 3 that has red graph function that is original function?

At the end I would just analyze canvas 3 and see how many red pixels I still have (none means that the pupil made good graph)?

Thanks in advance, Grega
 
 
subject: curves and the html5 canvas
 
Similar Threads
Text canvas vertical scroll
Creating an Image by Plotting Pixels?
Image from Canvas
How to find Pixels info from a text String
Make Line Graph scrollable in a JScrollPane?