Develop Reference

How can I remove/crop angle from corners of some image [duplicate]

This question already has answers here:
How to draw a rounded rectangle using HTML Canvas?
(15 answers)
Closed 7 months ago.
I'm trying to crop an image to make it fit on my margin. One example of what I'm trying to achieve.
The original image:
After the crop:
I already managed to crop the rectagle, but I have no idea how I can remove the corners. I tried with ctx.arc(), but I'm kinda confused with the values that I should use for x, y, radius and angle. The border-radius that I'm using depends on the screen size, but I've the value.

Use clip() with a Path2D and arcTo(). You will have to figure out your specific values which can be done with a little math (or trial and error). Be sure to draw you image after you clip()
arcTo()
clip()
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
canvas.width = 400;
canvas.height = 400;
let border = new Path2D();
border.arcTo(canvas.width, 0, canvas.width, 20, 50);
border.arcTo(canvas.width, canvas.height, 0, canvas.height, 50);
border.arcTo(0, canvas.height, 0, 20, 50);
border.arcTo(0, 0, 20, 0, 50);
ctx.clip(border);
function draw() {
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
draw()
<canvas id="canvas"></canvas>

Change the color of the "screen" waves

I been stuck on getting the waves to look just like I want. I'm trying to figure out how to get the base of the wave to be the color I need it. I can do my desired color but it blocks the background. I can not see anything behind it because I was using like a reflection. Maybe someone can figure it out cause I'm having difficulties getting it to work... I plan on making the wave drop and rise. Here is a link to the code pen: HERE
Here is where I have the vertical reflection:
var x = $.cx - $.length / 2 + $.length / $.count * i,
y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;
$.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
}
$.ctx.lineTo($.w, $.h); // -$.h - Vertically reflection
$.ctx.lineTo(0, $.h); // -$.h - Vertically reflection
$.ctx.closePath();
$.ctx.fillStyle = color;
if (comp) {
$.ctx.globalCompositeOperation = comp;
}
$.ctx.fill();
My desired look for the waves is below:
Here is what I got with a successful transparent top, just not the right coloring:

Your problem is that the screen blending of the three colors generates a solid white color, so all the bottom of your canvas becomes white.
Here I simplified a lot the situation, with just 3 rectangles. Your bottom of canvas is my central white square:
const c2 = canvas.cloneNode();
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = 'screen';
ctx.fillStyle = '#fb0000';
ctx.fillRect(0,0,50,50);
ctx.fillStyle = "#00ff8e";
ctx.fillRect(12,12,50,50);
ctx.fillStyle = "#6F33FF";
ctx.fillRect(25,25,50,50);
body {
background: #CCC;
}
<canvas id="canvas"></canvas>
So what we need, is a way to make this central square transparent so that we can draw our background behind.
To do this, we will need to draw our shapes at least two times:
once in normal compositing mode, so that we get the full overlap.
once again as source-in compositing mode, so that we get only where all our shapes do overlap.
const ctx = canvas.getContext("2d");
function drawShapes(mode) {
ctx.globalCompositeOperation = mode;
ctx.fillStyle = '#fb0000';
ctx.fillRect(0,0,50,50);
ctx.fillStyle = "#00ff8e";
ctx.fillRect(12,12,50,50);
ctx.fillStyle = "#6F33FF";
ctx.fillRect(25,25,50,50);
}
drawShapes('screen');
drawShapes('source-in');
body {
background: #CCC;
}
<canvas id="canvas"></canvas>
Now we have our overlapping area, we will be able to use it as a cutting shape in a third operation. But to do it, we will need a second, off-screen canvas to perform the compositing of the two states:
const c2 = canvas.cloneNode();
const ctx = canvas.getContext("2d");
const ctx2 = c2.getContext("2d");
function drawShapes(ctx, comp) {
ctx.globalCompositeOperation = comp;
ctx.fillStyle = '#fb0000';
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = "#00ff8e";
ctx.fillRect(12, 12, 50, 50);
ctx.fillStyle = "#6F33FF";
ctx.fillRect(25, 25, 50, 50);
}
// first draw our screen, with unwanted white square
drawShapes(ctx, 'screen');
// draw it on the offscreen canvas
ctx2.drawImage(ctx.canvas, 0, 0)
// draw the shapes once again on the offscreen canvas to get the cutting shape
drawShapes(ctx2, 'source-in');
// cut the visible canvas
ctx.globalCompositeOperation = 'destination-out'
ctx.drawImage(ctx2.canvas, 0, 0);
body {
background: #CCC
}
<canvas id="canvas"></canvas>
And voilà, our white square is now transparent, we can draw whatever we want behind our scene using the destination-over composite operation.

How to select particular area in canvas?

I am new to canvas, I have an image myimg.jpg, I have converted this image into canvas and i am trying to apply some pattern image for heel.
I am not able to do it. Here is my screenshot:
How can I get it done.
<div id="myId">
<canvas id="canvaswrapper" width="660" height="540"></canvas>
</div>
function drawImage(){
var ctx = $("canvas")[0].getContext("2d"),
img = new Image();
img.onload = function(){
ctx.drawImage(img, 0, 0, 500, 500);
ctx.beginPath();
var img2= new Image();
var w;
var h;
img2.src = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
var pattern = ctx.createPattern(img2, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, w, h);
ctx.arc(300,305,50,0,2*Math.PI);
ctx.fill();
ctx.stroke();
};
img.src = "myimg.jpg";
}
drawImage();

You can define the area you want to fill using an image mask that fits on top of your image - this step is something for Photoshop/GIMP.
For example, having your shoe as-is:
Create a mask for it leaving the heal in the original position (it makes it easier to draw it back in - you can always crop it and draw it using an offset instead). Important: background must be transparent:
Then super-impose the pattern using these steps:
Load the pattern and define is as a fill-pattern
Draw the mask into the empty canvas
Optional step: Adjust transformations if needed (translate, scale)
Choose composite mode "source-atop"
Fill the canvas
Choose composite mode "destination-atop"
Draw the main image on top (which will show behind the mask/pattern)
Optional step: draw in original mask image using blending mode "multiply" to add shadow and highlights (does not work in IE). This will help creating an illusion of depth. For IE, drawing it on top using a reduced alpha or a separate image only containing shadows etc. can be an option
Result
Example
var iShoe = new Image, iMask = new Image, iPatt = new Image, count = 3;
iShoe.onload = iMask.onload = iPatt.onload = loader;
iShoe.src = "http://i.stack.imgur.com/hqL1C.png";
iMask.src = "http://i.stack.imgur.com/k5XWN.png";
iPatt.src = "http://i.stack.imgur.com/CEQ10.png";
function loader() {
if (--count) return; // wait until all images has loaded
var ctx = document.querySelector("canvas").getContext("2d"),
pattern = ctx.createPattern(iPatt, "repeat");
// draw in mask
ctx.drawImage(iMask, 0, 0);
// change comp mode
ctx.globalCompositeOperation = "source-atop";
// fill mask
ctx.scale(0.5, 0.5); // scale: 0.5
ctx.fillStyle = pattern; // remember to double the area to fill:
ctx.fillRect(0, 0, ctx.canvas.width*2, ctx.canvas.height*2);
ctx.setTransform(1,0,0,1,0,0); // reset transform
// draw shoe behind mask
ctx.globalCompositeOperation = "destination-atop";
ctx.drawImage(iShoe, 0, 0);
// to make it more realistic, add mask in blend mode (does not work in IE):
ctx.globalCompositeOperation = "multiply";
if (ctx.globalCompositeOperation === "multiply") {
ctx.drawImage(iMask, 0, 0);
}
}
<canvas width=281 height=340></canvas>

HTML Canvas composition: combining "lighter" and "source-atop" effects

Essentially, I have a gray-scale image of a cube that I would like to color different colors using an HTML 5 canvas. I don't care much about browser compatibility at the moment, so I've been looking at the globalCompositeOperation property values listed here:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
Essentially, I want to combine the effects of "source-atop" and "lighter". Using just source-atop, I get a blue shape, but the different shades of gray are all filled in with the same shade of blue, so I get a flat, skewed hexagon instead of a cube.
Using just the lighter composite option, I get closer to the effect I want. All the cube faces are differing shades of blue like I want, but the previously transparent background becomes solid blue.
I would love a canvas solution that would produce the cube in the lighter example without the blue background. I realize I could just define the cube's points and use the fill style and paths to create the cube, but I have plans to use more complex icon shapes than a cube, and I don't want to do all that when I already have a gray-scale .png ready unless I absolutely have to.
Code currently is pretty basic
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var cube = new Image();
cube.src = "url" //path to gray-scale cube image.
ctx.clearRect(0, 0, canvas.width, canvaseheight);
ctx.drawImage(cube, 0, 0);
ctx.globalCompositeOperation = "lighter"; //or "source-atop"
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

Turns out you can combine them pretty easily. Here is how I ended up accomplishing this task.
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var cube = new Image();
cube.src = "url" //path to gray-scale cube image.
//get a blue mask that fills the entire cube region
ctx.clearRect(0, 0, canvas.width, canvaseheight);
ctx.drawImage(cube, 0, 0);
ctx.globalCompositeOperation = "source-atop";
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//save that image off somewhere.
var blueMask = new Image();
blueMask.src = canvas.toDataURL();
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.globalCompositeOperation = "source-over";
//draw the cube again
ctx.drawImage(cube, 0,0);
//draw the mask image over it with the 'lighter' composition setting.
ctx.globalCompositeOperation = "lighter";
ctx.drawImage(blueMask, 0, 0);
This produces the desired result.

In a 2D canvas, is there a way to give a sprite an outline?

I'd like to give a sprite an outline when the character gets healed/damaged/whatever but I can't think of a way to code this using the 2d canvas. If it were possible, I'd think it would be a global composite operation, but I can't think of a way to achieve it with one of them.
I did find this stackoverflow answer that recommends creating a fatter, solid color version of the original and put the original on top of it. That would give it an outline, but it seems like a lot of extra work especially considering I'm using placeholder art. Is there an easier way?
This question is different from the one linked because this is specifically about the HTML5 2D canvas. It may have a solution not available to the other question.
For what it's worth, I don't mind if the outline creates a wider border or keeps the sprite the same size, I just want the outline look.

Just draw your original image in 8 position around the original image
Change composite mode to source-in and fill with the outline color
Change composite mode back to source-over and draw in the original image at correct location
This will create a clean sharp outline with equal border thickness on every side. It is not so suited for thick outlines however. Image drawing is fast, especially when image is not scaled so performance is not an issues unless you need to draw a bunch (which in that case you would cache the drawings or use a sprite-sheet anyways).
Example:
var ctx = canvas.getContext('2d'),
img = new Image;
img.onload = draw;
img.src = "http://i.stack.imgur.com/UFBxY.png";
function draw() {
var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
s = 2, // scale
i = 0, // iterator
x = 5, // final position
y = 5;
// draw images at offsets from the array scaled by s
for(; i < dArr.length; i += 2)
ctx.drawImage(img, x + dArr[i]*s, y + dArr[i+1]*s);
// fill with color
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = "red";
ctx.fillRect(0,0,canvas.width, canvas.height);
// draw original image in normal mode
ctx.globalCompositeOperation = "source-over";
ctx.drawImage(img, x, y);
}
<canvas id=canvas width=500 height=500></canvas>

Maybe it would be worth trying this :
• build a canvas 1.1 time bigger than the original sprite
• fill it with the outline color
• draw the sprite scaled by 1.1 on the canvas using destination-in globalCompositeOperation.
Then you have a bigger 'shadow' of your sprite in the outline color.
When you want to draw the outline :
• draw the 'shadow' (centered)
• draw your sprite within the shadow.
Depending on the convexity of your sprite, this will work more or less nicely, but i think it's worth trying since it avoids you doubling the number of input graphic files.
I just did a short try as proof-of-concept and it quite works :
http://jsbin.com/dogoroxelupo/1/edit?js,output
Before :
After :
html
<html>
<body>
<image src='http://www.gifwave.com/media/463554/cartoons-comics-video-games-sprites-scott-pilgrim-paul-robertson_200s.gif' id='spr'></image>
<canvas id='cv' width = 500 height= 500 ></canvas>
</body>
</html>
code
window.onload=function() {
var spr = document.getElementById('spr');
var margin = 4;
var gh = createGhost(spr, '#F80', margin);
var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
var outlined = true;
setInterval(function() {
ctx.clearRect(0,0,cv.width, cv.height);
if (outlined)
ctx.drawImage(gh, 0, 0)
ctx.drawImage(spr, 0, 0)
outlined = !outlined;
}, 400);
}
function createGhost (img, color, margin) {
var cv= document.createElement('canvas');
cv.width = img.width+2*margin;
cv.height = img.height + 2*margin;
var ctx = cv.getContext('2d');
ctx.fillStyle = color;
ctx.fillRect(0,0, cv.width, cv.height);
ctx.save();
ctx.globalCompositeOperation = 'destination-in';
var scale = cv.width/spr.width;
ctx.scale(cv.width/spr.width, cv.height/spr.height);
ctx.drawImage(img, -margin, -margin);
ctx.restore();
return cv;
}

You could use strokeRect method to outline the sprite after drawing it. It should be asy if you know your sprite's dimensions...