I would like to use an image for background in the canvas element provided by HTML5.
The thing is I don't want the drawing to modify this image, I just want it to be use as a reference or guide for the user.
For example: if I draw a background image on the canvas then I add some lines and random drawings, once I use the erase tool it will erase both the lines I've made and the background image.
How can I prevent this?
Thanx.
you can use CSS to position the canvas over an <img> element with your background
this is similar to the usual trick to do layered animations: just do a different <canvas> element for each layer and put one on top of the other.
non-drawn pixels of <canvas> are transparent, not white.
You can simply use CSS.
Lets say you have a canvas such as :
<canvas id="Canvas" width="385px" height="330px"></canvas>
You can use CSS to put a background image :
#Canvas{background:url(Grid.png)}
Related
How do I create a full size background image with no CSS?
I don't care if the background attribute is deprecated or not, I want to use it.
If I use the plain attribute, however, the image is tiled, not scaled.
You can't.
The background attribute you want to use was superseded by CSS before the capability to scale background images was added.
There is no, obsolete or otherwise, HTML-only mechanism for scaling background images.
You can't even fake it with a foreground image because you'd need CSS to position it in the background.
On a valid background, I need to add transparent holes/images that shows body background.
Like this websites;
skrill.com
skrillex.com
I can add it as a image but I should resize it according to resolution. Also I'll add some descriptions under this images.
Is there any way to do this?
There are three ways to achieve this effect:
Make the solid background a SVG or PNG, with holes cut through to show the underlying background.
Make the transparent images replicate the background.
Implement the background with <canvas> and use JS to achieve this effect by dynamically redrawing the background.
The sites you linked are using one of these approaches.
I'm attempting to make a slideshow composed mostly of divs that can be masked by a canvas element (so that it may be in a circle or strange shape, rather than a square. Is this possible? I have seen many examples of masking an image, but not an entire div or collection of divs.
Yes its certainly possible to mask divs. For instance a canvas could mask a div like this:
that's just an image, source here:
http://jsfiddle.net/r58jF/
or white, which it should be noted merely gives the illusion of a circular div and that illusion is highly contingent upon what is in or behind the div
(or something fancier)
You cannot use the rendering of HTML elements as an image source for a canvas, and so you cannot use a canvas to draw the contents of HTML. If you want to make arbitrary portions of a div fully- or partially-transparent, the answer is "No, you cannot do that with a Canvas."
I have the image below - is it possible to fill it with a color (eg: the part in the triangle) using HTML/CSS?
Or can I create this shape with HTML/CSS and then fill it?
Or do I have to use a colored in image?
Would be preferable to use HTML/CSS completely or at least fill the image..
thx
If you leave the part that you want to fill transparant then you can fill it with a color using css. If you want to create the triangle without using an image you can use SVG but that is not supported in some versions of IE (8 and older) or you can use Raphael JS to draw it in pretty much all browsers.
HTML and CSS don't actually DO anything, they're just markup for how stuff should be presented. So no, you cannot edit an image using HTML and CSS only, though it is probably possible with JavaScript.
What you could do with HTML and CSS is to display an image with an alpha channel and set a background color on the element containing the image. The background color would then be displayed where the image is transparent.
you can... Make sure the triangle part of your png is transparent and the rest white... PLace your image in a div with the same width and height as your pic and give that div a background color. Voila... Everything is white except the transparent triangle.
Good luck.
<div style="width:66px;height:30px;background-color:green;">
<img src="yourimage" alt="" />
</div>
How can I add a background image to an element and make it transparent?
CSS doesn't provide a way to add translucency to just a background image.
You can use the opacity property to make the entire element (content and children included) translucent.
You can use rgba() colour values to make a plain background translucent.
If you want a translucent background image, your best bet is to edit the image itself (and save it in a format that supports translucency, such as PNG).
Did you mean the alpha() and opacity() property?
Take a look here http://www.w3schools.com/css/css_image_transparency.asp