I need to put more than one (3) HTML5 Canvas side by side. Left and right will be 200px wide. Center will fill the rest of the space. All three need to fill the screen vertically.
What I'm doing is building a drawing program. Left and right will be drawing tools. Center will be the drawing area. I think I need a canvas specifically for the drawing area in order to zoom, pan, scroll the drawing without the image overlapping the tool windows. Essentially I'm using the center canvas as a clipping range. I don't know if this is the best way to do this or not.
What I've tried is putting 3 <canvas>es on the screen, but they just overlap. I put 3 in <div>s, but they just stack.
Thoughts?
As per the comments, <canvas> isn’t a void tag, so you need to write </canvas>.
You can also use that to provide helpful text in case somebody’s browsing in something not-quite-modern:
<canvas id="one">
Hey, your browser doesn’t support the Canvas API!
You should upgrade if you want to use this.
</canvas>
Related
is there any way to make the perspective of an element in HTML centered in the middle of the screen, so that the perspective point is not moved when you are scrolling...?
Thanks
EDIT:
Here is a small picture of my idea...
The element would be visible from the top and become visible from the bottom as you scroll down.
http://i.stack.imgur.com/W84Me.png
Sorry for my bad english
While traditionally, HTML Elements are 2D boxes only, since CSS3 there is the transform property which lets you transform the boxes in 3D space.
http://www.w3schools.com/cssref/css3_pr_transform.asp
This allows for such perspectives. But since only few browsers let you choose a perspective projection (only orthogonal), you may have to create the transformation matrix yourself. You may find tutorials and formulas for that in most modern OpenGL tutorials, for example.
Only problem left is show a different image from the bottom, since in HTML, an element looks the same from both sides (only mirrored). Maybe you can position 2 elements slightly above each other to get two different faces.
Also, you will need JS to move around the object on the screen.
Maybe you better use some modern technique like canvas or WebGL to do this, since HTML is not really made for 3D.
On an HTML page, you can make text flow around images with the CSS property "float". But this will only consider the image's rectangle, not transparent regions in the image. I now have an image that has large areas of full transparency, like for example a circular logo, and would like the text to flow around the circle contour of that logo, not the bounding rectangle. At least on the text-facing side of the image.
I know that CSS is probably not suitable for that task. But is there some workaround, like hidden divs or something that can achieve the same (or a similar) effect? Has somebody already seen such a thing?
I have written a PHP function for that now. It takes the PNG image and generates the <div> elements to make the text flow around another form than the image's rectangle. You can find the code here:
https://unclassified.software/source/shaped-image-flow
Update 2020/2021:
Now there is a CSS property for that: shape-outside. It can be given an image with transparency that will determine the outside shape to let the text flow around. If the visible image is already a PNG, the same image can be used for this CSS property. Additional margin can be added with shape-margin. Both are supported by anything except IE.
Example:
<img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
I really doubt you can do that easily without making a big mess, of tags, JavaScript or both. One way i can think is placing image on larger zindex and positioning div or divs behind it, and text would flow around them. It would be easiest to use smaller rectangle that excludes transparent areas. But then why not just crop/clip the image? Or you can try floating line height divs behind it, but I guess that it will get quite ugly pretty fast. Or you could try placing each line of text in span/div and positioning them manually or with js by calculating approximate shapes to those that are in the image. One other idea, of which I'm not sure: it might be possible do this using svg. But quick search does not show much promise ether.
Any way one more thing to consider, when doing something as experimental and complicated as this, in whatever way you do this, it will most likely be huge pain to make it work well across most browsers.
There is a css property that do just what you want
shape-outside include values of shapes you can use.
https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/
We have a requirement to display short / bigger size images. (e.g. I could have the front portion of the bus, back portion of the bus and middle portion of the bus as separate images).
So to demonstrate the above, I could try
front,middle,middle,back (to construct shorter image)
front,middle,middle,middle,middle,back (to construct bigger image)
Are there any sites which let you download such images (i.e. they are already split) OR what would be an easier way to achieve this from an already available image.
You can use ImageMagick. Check the following example.
In your case if you want to split image only horizontally in (let's assume) 200px slices:
convert -crop 200 +repage verybig.jpg slice%02d.jpg
You could slice and dice an existing image with HTML/CSS, by setting up several adjacent elements with the same image as a background, then manipulating the widths and background position to get the desired effect.
Here's an example: http://jsfiddle.net/gjJcM/
You'd need to know something about the image content you're working with to make this seamless - I'd need more context to think in further detail.
HTH
The slicing and dicing can also be done with the Gimp.
Check out the Gimp's Filters->Map->Make-Seamless. It's used to make tiles join up seamlessly both horizontally and vertically. You can use it to make a horizontally repeatable tile by adding extra background above and below, and then after use cropping away the excess.
A more sophisticated tool for making the seamless join is panotools.
Combining the pieces at the end is easiest if you include half of the middle of the bus with the back and half of the middle with the front. You won't get a bus with no middle, but from the question, that's not something you needed.
I want to layer 4 images on top of each other inside a table cell with css. Here is what I want the final image to look like:
The 4 images are:
The gray rounded corner rectangle
with the red shaded triangle and the
numbers
The blue bar
The lines on top of the bar
The yellow triangular indicator
All these images must be on top of each other within the a table-cell. The bar must be able to stretch (I would draw it with a css div with a variant width property if it's possible) and the triangle indicator to move, so the entire thing can't be one image.
Any ideas how to do this?
Note: any solutions have to work in IE6 and up, Firefox, and Chrome
Would this be what you want to do?: How to let an HTML image overlap another
If this was my challenge, I think I'd be looking at a full-fledged charting solution to make this a quick, painless process and give a better looking (and animated?) result.
Here's a near dead ringer that I found with some quick Google-Fu: http://www.fusioncharts.com/widgets/Gallery/Linear1.html
I've had to do a lot of charting of late for applications I build and I --used-- to hand-roll all my charts and tables. Not any more! Between HighChart, FusionCharts, and JqueryUI, it's all covered, no reason to invent the wheel....and they look better.
Check the rounded corners of the main tabs in this site Those are background images with width of 440px, and still it adjusts to the containing element without loosing the rounded edges.
Looks like the list item and anchor both have the same background image, just at different offsets.
The image is set as the background for each of those elements. The anchor is set to show the left most portion of the image while the list item is set the right most portion with right padding just wide enough for the image to peek through. The technique is known as Sliding Doors. Here are the links collected from the other answers:
A List Apart's Sliding Doors Part 1
A List Apart's Sliding Doors Part 2
A CSS2 tutorial
A CSS3 tutorial
Thanks Mariuz and Darko Z.
they are using a technique known as "Sliding doors". You can read more about it at A List Apart:
Sliding Doors Part 1
Sliding Doors Part 2
There are several tutorials on rounded corners on the net.
Using CSS2 you can try the following:
CSS2 Tutorial
If you want to use CSS3:
CSS3 Tutorial
A simple google search for rounded corners will give you many helpful tutorials.
It may be only peripherally relevant, but we should be careful not to leave it to the browser to resize large images to a more practical size.
Why fill a page with large images if they're only going to be scaled down by the browser?