Setting a transparent color in HTML5 - javascript

Is it possible to set a transparent color for images loaded in HTML5?
I would be looking for something similar to the setColorKey() function available in SDL. This would be used to easily remove a background from some sprite sheets that I will be using.

There is no very straightforward way to do this, but you can use the <canvas> tag to do this.
Draw your image in the canvas, using drawImage, and then use getImageData and putImageData to perform pixel manipulation on it.
There are some examples of pixel manipulation in canvas here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

There is no built in function for this. If this doesn't need to be dynamic, then you could remove the color from the original image and make those areas transparent. Then you put the images in a div that has the background color that you just removed from the image. After that you change the background color of the div when you mouse over the image.
If that sound like the right idea and you need some starter code let me know.

Related

How do I apply context.filter only to the image on the canvas?

I am making a photo editor where you can upload an image, add filters, put on text, draw with a pencil, etc. The problem is that the filters that I want on just the image, applies to everything on the canvas. I don't want it to apply to the text and the drawn lines with a pencil. Is this even possible in vanilla JS or would I have to use a library?
This is how I it looks right now when the text color is actually set to red and I applied grayscale:
This is how I want it to look with red text and grayscale applied:
This happens with all of the other filters as well, but gray scale was the most obvious one, so I used that as an example. I did not include code as I am mainly asking if this is even possible.
Yes it's possible, just set the ctx.filter back to "none" after you've drawn the image.

Is there a way to make a circular image in HTML using Canvas or other Method?

I know that the canvas element can look like a circle using the CSS border-radius property. However, if you draw something using the canvas API, and then right-click to "Save as Image", when saved, the image is still a rectangle (as if the border-radius was not applied). Is there a way to actually save the correct image?
All image formats that I know of yield rectangles.
You could draw a circle on a canvas with the outside of the circle being transparent. That would visually look like a circle rather than a rectangle.
When css applies, it does not really transform the image except visually. So, you would need a bit more than simple css. The issue is discussed here where what you want is achieved using javascript:
Save canvas image after css applied
Capture and save an image with css effects applied
Hope this helps.

Layering Canvas elements

I'm working on a pototype HMTL5 canvas animation that will export to quicktime.
I'm having a dynamically generated background with dynamically masked elements on top of it.
I can get the background to be made, and have it export to the server as a frame by frame animation (png sequence) and then compile the animation using FFMPEG into a quicktime. The concept is working.
However, whenever I try to put the dynamically masked elements on top of the background, the background gets affected by the mask too.
Currently the draw opperation I have goes
Draw Background element 1
Draw Background element 2
Draw Foreground Element Mask
Switch to Source-in Mode
Draw Foreground element fill
Revert to Source-Over Mode
I'm obviously using the source mode wrong, but I'm not sure it is possible to do what I want (have a mask affect the element right under it, but not ones below that).
The easiest solution I can think of would be to just layer 2 canvas objects on top of eachother...however I'm not sure how I could combine the 2 canvases into a single image for the quicktime export.
Thanks for the help
The context.drawImage method will accept another canvas as the image source.
So if you want to "flatten" all your canvases into a single canvas:
yourMainContext.drawImage(yourOverlayCanvasElement,0,0);

How could I use canvas to past one image into an other?

I would like to past one image into an other image with a transparent box.
So it's not only copy and past some image into an other. Also how could I transform the image to fit in the other image.
Example: placeit.net
How could I use Canvas, JQuery or other for that? Thanks for any examples.
UPDATE:
I didn't want to be spoon-fed some code. Only one example or documentation about transforming like placeit.net.
Yes, you can do placeit.net type effects using html canvas.
Look at compositing to draw a second image only where a first image is transparent.
Look at transformations to:
Rotate your second image into place,
Skew your second image to fit the angle of your first image.
You can do image filters (mostly from 3rd party solutions).
A good blur filter: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
You can add text to your presentation with context.fillText

Using Javascript is there a way to grab the background image rendered by a linear or radial gradient?

I'm specifically interested in gradients but I suppose the question applies to images rendered with any method, such as data:image/svg+xml;...
Is it possible?
ETA:
This was possible by rendering the gradient onto a canvas. For anyone interested in saving a .png of a CSS3 linear or radial gradient, go to:
http://www.visualcsstools.com/gradient-generator.htm
Design your gradient, click the CVS (canvas) button and right-click the gradient preview to save it as an image.
A DOM element with a CSS gradient background, no way to do that without a screen shot utility.
However, if you drew a gradient in a canvas element (and any other graphics in the canvas element), you could export the graphic of the canvas element as a JPG or PNG using JavaScript in the browser. See this question.
By taking a screenshot perhaps?

Categories