i want to make a demo using html css javascript, and the idea is :
1.i want to make a editor liek a paper
2.you can write word on it like flash , the different from textarea is :
it can be writed on anywhere you clicked, and show the Cursor where you left click
3.it can be Paint simple Graphics like flash
so what can i do??
1.using div ?
2.using canvas ?
3.other
thanks
Use SVG/VML graphics.
Best way to do this is with a library such as Raphael or JSX Graph.
Hope you find what you want between these two libraries.
1 and 2 could be done without Canvas. You could simply catch the click event on the underlying element, and create a div (with contenteditable) or a textarea (nicely styled), to that position.
For number 3 it would be handiest to use the Canvas element.
It also depends on what level of support you need to give to "older" browsers. As you might know Canvas is not supported in IE8 (and lower).
It also depends on whether you want to do something with the final result. Canvas is a canvas, and you can only export it as bitmap image, not vector. You might want to chose SVG to keep the image in a Vector format.
Related
How does one implement functionality similar to the one shown in this gif in a website?
Specifically, the part where the user clicks on a (non-rectangular) area of the image and that area then changes colour.
A long, long time ago when the internet was still young, there was something called image maps. Is that still the preferred approach? I heard about svg, does that provide this type of functionality? What about canvas?
I don't know about image maps to get them in this shape of hit areas.
But I recommend using canvas for these type of applications.
You have multiple options for doing that, being image maps one of them. However, I wouldn't do it with it, nowadays, there are better solutions.
You can either use canvas, as suggested before, for example using a canvas library like http://fabricjs.com/ or, maybe a bit easier, using SVG elements.
The benefit of SVG is that they render as normal DOM elements in a website, so you can debug then in the inspector, attach normal click events to them, style them using CSS, etc.
multiple options for this.
SVGs + CSS
CANVAS animations
FLASH( wouldn't recommend this option.,Pretty outdated)
Plain html css (But this wont be customisable in future for different shapes, a lot of time consuming when compared to other ways and confusing unless written with good documentation.)
html+css way: you can always make most of the geometrical shapes with css and html. But, curves we have svgs to go for and use css/svg transitions for visuals
I am trying to make a webpage, where I want to plot points with which I can associate Mouse events (Jquery).
So, I guess I want them to be dom objects and not want to just paint them. (Please suggest if we can paint using html5 and still treat them as dom elements)
So essentially I have a text files with x,y co-ordinates and I want to plot those but want to associate Jquery events with them. for example: on left clicking them a graph appears or right clicking them a menu appears depending on which node I clicked.
Imho, it would be a very silly approach, to write DOM elements with lines and dots.. For instance, how would you make a round line - you could create diagonal lines with border CSS styling but.. Well - there are many options available! Another approach could be Highslide.
jqueryui-visualize
jQuery top5 graphing tools
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Demo
Dojo Toolkit
Since you for some reason have tagged this with dojo, check out this blog entry;
http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
2dChart Demo
Read about Scrolling / Zooming here
Zoom Demo
Here's a nice little introduction slideshow from an apache user
Well, several approaches.
You can take your coords and create absolute positioned elements on the DOM using those points. Using jQuery you can set 'top' and 'left' points to position them. This method may be easiest for you because jQuery can easily apply click events.
You can use the HTML5 canvas and draw shapes onto it using the coords from your file. With this method you would either need to write your own event library or use libraries already written such as kinetic.js. Also styling these is going to be a bit less dynamic and extensive than using DOM objects and CSS as with the first method.
The new layout of YouTube added a background random-noise which I like very much, having seen almost exactely the same effect on other sites, so I plan to use the same technique in my webpage prototypes, or at least have this "trick" in my toolbox for future use.
The image is like this (taken from http://g.raphaeljs.com/barchart.html):
Now Youtube accomplishes the (embarrassingly identical) same effect by embedding the image in source code:
(on Youtube main page, right click background to display it, then right click the image and "display image properties" [ffox]):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACVCAAAAAB0....lotsofdata
I tried to discover where this line of code is in the source code, but due to the dynamic creation, I couldn't.
So, my question is:
"Is there a way to apply a tiled background to a page, using a png image generated algorithmically CLIENT-SIDE?" (preferrably with javascript)
I am very beginner in webdev and javascript, but I like to base my learning around defined problems to be solved, so this would be a nice way to learn something
Thanks for reading!
UPDATE:
For anyone interested in tile texture generation using javascript, I found this, which seems very interesting:
http://somethinghitme.com/projects/canvasterrain/
http://somethinghitme.com/projects/canvasterrain/js/canvasTerrain.js
To generate image client-side, I suggest you to have a look to HTML5 canvas element.
You can draw on a canvas with Javascript (even if the canvas element is hidden), and so generate anything you want (including a simple noise tile).
Resource to learn Canvas drawing : https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
After that, you can export your canvas as URL with the method toDataURL (a string like "data:image/png;base64....") which is interpreted by browsers like a traditionnal url for an image, so you can set it as css background for your body element.
Warning 1 : Canvas is supported by all modern browsers and you can emulate it on IE with ExplorerCanvas - but I don't know if ExplorerCanvas support .toDataURL()
Warning 2 : Canvas is resolution-dependant, so I suggest you to generate a little tile (32*32, or 64*64) and repeat it
Edit : An example of tiled background : http://jsfiddle.net/SfzPc/12/
Edit 2 : An completed example with a noisy background : http://jsfiddle.net/SfzPc/14/
You can use CSS to display this image:
#someimageselector {
background: white url('data:image/png;base64,iVBOR...lots of data') repeat scroll left top;
}
You can change the initial color of your background by editing the value white.
To set CSS with JavaScript, set the background property of an element:
document.getElementByID("someimageselector").background = 'white url(data:image/png....';
There are two jQuery plugin libraries that do exactly what you are looking for: NoiseGen and Noisy. Haven't used either yet but they both look pretty good.
NoiseGen
Project: http://primegap.net/2011/10/20/noisegen-generate-background-noise-with-jquery/
Demo: http://www.lucaongaro.eu/demos/noisegen/
Noisy
Project: https://github.com/DanielRapp/Noisy
Demo: http://rappdaniel.com/other/noisy-sample/
Fyi: Base64 is binary data represented as a string.
Most likely the original image still came out of Photoshop and was later encoded into Base64.
This technique helps having less http-requests per page view, as the actual image data can be saved and cached inside the css or html document.
I have a canvas in which I need to draw text on in javascript, and then test whether given points overlap the text.
I am wondering if this is possible using the canvas (context.fillText(...)) and then some kind of test (if (overlap(textobject, {x:12, y:10{}) ) or whether I will need to draw the characters in SVG so I have the co-ordinates and can sort it from there?
I'm sure there are libraries out there that have started to pop up for this kind of thing but am having trouble with my google skills today.
I could think of a couple ways around this unless you are needing the text to be drawn to canvas for some type of pixel manipulation...
One way is float the text over the canvas element (position: absolute;) then test a hover event with jQuery. Another way is to create a box around the text in your canvas element, then detect when the mouse is within those bounds.
If you are looking for the most accurate test, svg would be the way to go.
You might also try out a library and see if they have already created this functionality. easel js
Update: Being an open web fan and OOMG HTML5, I had completely ignored Flash. Turns out that it is the best medium for what i'm trying to do. And as actionscript and JS are so similar, the logic was a copy paste job.
Thanks heaps for the answers, it ended up being a huge ask, so I drew my characters in Illustrator, turned on the grid, created an array of where the grid crossed the character and where it didn't - and then turned that into a JS array. I'll publish a link once it's finished.
Forgive me my ignorance but I am very new to the HTML 5 arena and never worked with graphics using Javascript.
I was doing some reading and came across the Canvas tag and the source stated that the canvas tag acts as a graphics container and is used to render graphics on the webpage by the use of Javascript.
My questions is, why would I need to use Canvas as a placeholder to render graphics instead of using some other arbitrary tag that can be used as a graphics placeholder for example?
A <canvas> tag is exactly like an <img> tag, with the difference that instead of loading the image from the network you can draw it yourself with javascript code.
You can draw lines, circles, filled polygons, gradients and matrix-transformed pictures. You can also redraw the canvas content in a loop to make an animation.
To see what you can do with a plain canvas 2d (no webgl, just standard 2d rendering) take a look at this small demo or look at this video if your browser is too old and doesn't support canvas.
It's pure javascript, nothing loaded from the network, everything is computed in the browser, including the texture and the raytraced image used for envmapping part. All in a single 4Kb html file.
Do you really think you can do the same using regular <div>s ?
EDIT:
For a much simpler demo with a readable source you can check out this rotating icosahedron.
Canvas is intended for graphics manipulation, whereas div isn't. Semantically, you should be using Canvas.
You can't draw on arbitrary elements.
Canvas allows you to manipulate pixels with acceptable speed. You can draw various shapes, set colors for pixels etc. With div you can only render standard HTML elements.
DIV is a container for other tags. CANVAS is a container for pixels.
Whilst it is (probably) possible to do everything you want to do drawing-wise inside a plain DIV, with CANVAS the browser knows semantically that the area is going to contain graphics and can use that information accordingly.
Browsers support a variety of drawing routines for CANVAS natively, whereas you'd have to cook your own entirely in JS for DIV.
A really good resource for information on the HTML5 canvas is http://diveintohtml5.ep.io/canvas.html
Why use canvas:
1- canvas is secure to use and compatible with multi platform.
2- it have a lot of ready function to use in animation.
3- you can play with speed, pixels, colors.
4- you can save result of canvas as image.
5- you can implement professionally games with canvas. check here
simply it is act like flash but with no plug-ins.
usefaul libraries to use:
- easel js: flash like library
- processing js : open souece animation library
Drawing using
<canvas>
Will load straight away when entering a webpage with this in use, where an
<img>
Will take much longer.