As the title says, i want to add background pattern to a png image(not the whole canvas). I tried various guides but they are all about adding background pattern to whole canvas by either using background-image css property or by using canvas's createPattern method.
This is what i'm creating.
As you can see, there are various png images on the canvas(left arm, right arm, body, etc.) and they are all customizable. Now i want to add repeat-pattern to those png images. Those repeat pattern would be an image itself.
How to do that via svg, fabric or any other method?
A really simple way is to create a FOR loop to draw your PNG images at the size you need.
Use the canvas width/height values,your image size and your preferred image distance to determine
the number of iterations your loop needs to run.
On each iteration increment a distance variable a certain value in
order to blit your image at an increasing distance on the x/y axis.
When the loop ends you will have a pattern.
Related
I have HTML5 canvas drawing app and I need to change it's background color when user clicks a button.
Background-color on canvas is working on user-side, but user can save the image to server and I'm exporting canvas data using canvas.toDataURL('image/png'). Problem is, background color of canvas is not included, it only sends data user drawn.
I thought about putting big retangle over whole canvas, but that overwrites all drawings already made. Any ideas?
If you want to add the background after you already have drawn something on the canvas, you could add another canvas with the same size and with "display:none" - then, before sending the image, just fill the temporary canvas with your main canvas element's background color from the CSS, then draw the main canvas onto the temporary one.
Finally, send to server the composite from the temporary canvas rather than the bitmap of the main canvas that has the transparent background.
You're not showing any code, but: You need to draw the background using it's context. Setting the background using CSS will as you already discovered not include it when you extract the image.
Canvas is simply put two parts: the canvas element itself and its bitmap. Using CSS affects the element but not the bitmap. Therefor, you need to update the bitmap usually through its context or using the pixel buffer for it to become a part of the bitmap.
Do the following:
At initialization, draw the background using for example fillRect()
Draw your remaining graphics on top
Extract using toDataURL()
I am using KineticJS and wish to create a precise image hit region (ignore transparent pixels) for my sprites. I see how createImageHitRegion accomplishes this for images, but I don't see how to apply this to sprites. Said another way, while method createImageHitRegion is a method which accomplishes what I want for images, there appears no similar method for sprites. If I could create an image hit region on just one image of each of my sprite that could work for me, but a big rectangular region which encompasses the entire width and height of the image of the sprite can't work. Any ideas for a workaround? Perhaps I've missed something?
There's no easy way hit-test non-transparent pixels on sprites.
I can think of a couple of theoretical workarounds...
If you can draw a path outlining the pixels you want to hit.
The sprite object allows a custom drawHitFunc so you could use mySprite.afterFrame to redefine a custom hit area for each of your sprite images.
mySprite.afterFrame(0, function() {
mySprite.setDrawHitFunc(function(){
// draw the path you want used for frame#0
});
});
// repeat for all frames
If you can't draw a path outlining the pixels you want to hit.
Instead of using sprites, make your own sprites using individual images.
Do that by creating a series of images (including createImageHitRegion) and sequentially making one of those images visible so it appears to be playing a spritesheet.
I use jcrop to provide users with a friendly way of uploading their images via ajax. Obviously these images have some constraint like width and height which is where jcrop comes into play. So for the sake of brevity what im doing is as follows:
input file select via javascript file api loads the image into a img tag. Jcrop works with this image tag and renders the result onto a html canvas.
Now this is the dodgy part. The canvas image is always blurry...
for arguments sake the canvas is set to 400x200 which is the crop size.
If the canvas width and height is set via CSS it results in a blurry image result. TO get around this I had to set the width and height via html attributes. Now I have a wonderful cropping solution that can save images via AJAX. Crisp and Clear:)
<canvas id="preview" width="400" height="200"></canvas>
According to HTML Standard, if width or height attribute is missing, then the default value must be used instead, which is 300 for width and 150 for height. And these two attributes will determine the canvas's width and height, while the css properties merely determine the size of the box in which it will be shown.
The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.
The intrinsic dimensions of the canvas element when it represents embedded content are equal to the dimensions of the element's bitmap.
The user agent must use a square pixel density consisting of one pixel of image data per coordinate space unit for the bitmaps of a canvas and its rendering contexts.
A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.
You can refer to the following post for more details:
Canvas is stretched when using CSS but normal with "width" / "height" properties
This is really just an extension of the answer above. I too encountered the problem of CANVAS images resized using Javascript/CSS becoming fuzzy and blurry, because my application first used HTML to create a few DIVs, one of which held a CANVAS control, then the ONLOAD event called a Javascript routine to get the screen size, optimise the sizes and positions of all the DIVs and the CANVAS accordingly, and finally draw on the CANVAS. I did it that way as I wanted the CANVAS to always be as big possible for whatever device it was viewed on.
My solution is to use Javascript to dynamically draw the CANVAS control too, i.e. for the DIV that contains the CANVAS simply include...
var CanvasWidth=screen.availWidth-30;
var CanvasHeight=screen.availHeight-190;
//The 30 and 90 above are arbitrary figures to allow for other DIVS on the page
var o=window.document.getElementById("IdOfDivContainingCanvas");
o.innerHTML="<canvas id='myCanvas' width='"+CanvasWidth+"' height='+CanvasHeight+'></canvas>";
...so that the size of the CANVAS is effectively dynamic; Created with it's size specified using HTML attributes, just before executing the Javascript statements that actually draw on the CANVAS.
Usually when an image is being resized in javascript or css3(using background-size), it will stretch an image from the center point. I need an image to be stretched and distorted from a single point that could be anywhere. It's going to be dynamic so I don't want to resort to using separate images.
Here's a pic that illustrates what I mean:
Hopefully there's an answer out there!
You have a few options to achieve this effect.
The "correct" way would be to use canvas to draw the image: Skewing images individually using canvas
Another way would be to fake the effect using the CSS transform skew.
http://developerdrive.com/demo/skewing_elements/skewing_elements.html
You would do this inside an element with "overflow: hidden" to make it look like a background image.
It's not even clear to me what you want from the image you're linking too. Do you want it distorted or not? And is the distortion uniform?
I'm going to guess whatever you're doing can be approximated by drawing an ever decreasing set of (or maybe rectangles) clipped from the center of a some image and drawing them onto a "canvas" (think generic term not html5 term) given new coordinates for the center of each clipping. There may be a faster way to draw this than redrawing parts of the image multiple times, it's just how I visualize it possibly working.. at least maybe in some mathematical sense.
What I am trying to make is some kind of scrollable viewport in which a really large image is loaded (as in 10.000 x 10.000 pixels or more) and I should be able to draw some lines / shapes on this image.
There are two methods I can think of to draw the image / allowing the shapes to be drawn:
Using an tag to draw the image and draw a canvas the size of the image above it.
Using the drawImage() method to draw the image and just use a canvas.
I have tried both cases but when I load an image (in the img tag or using the javascript Image() object) it consumes about 500MB of memory.
I am wondering if there is a more efficient way to accomplish this.
Never ever make a user download an image that size unless you absolutely have to.
Make 100 smaller tiles (or thereabouts) of the image and draw the tiles to the Canvas, only drawing the tiles that can be seen at the current time (like google maps, etc do).