How to draw this in html5 canvas? - html5-canvas

Question

How do I draw this in html5 canvas?
I can only do the rectangle with round corners part.
<canvas id="myCanvas" width="578" height="200"></canvas>
<script type="text/javascript">
function roundRect(x, y, w, h, radius)
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var r = x + w;
var b = y + h;
context.beginPath();
context.strokeStyle="green";
context.lineWidth="4";
context.moveTo(x+radius, y);
context.lineTo(r-radius, y);
context.quadraticCurveTo(r, y, r, y+radius);
context.lineTo(r, y+h-radius);
context.quadraticCurveTo(r, b, r-radius, b);
context.lineTo(x+radius, b);
context.quadraticCurveTo(x, b, x, b-radius);
context.lineTo(x, y+radius);
context.quadraticCurveTo(x, y, x+radius, y);
context.stroke();
}
roundRect(10, 10, 200, 100, 20);
</script>

Answer 1

If you prefer rounded corners there is a easier way: you may use the context method arcTo()For example to draw a rectangle with rounded corners you can write:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function roundRect(x, y, w, h, r){
var x0 = x, y0 = y;
var x1 = x0+w, y1 = y0;
var x2 = x1, y2 = y0+h;
var x3 = x, y3 = y2;
ctx.strokeStyle = "green";
ctx.lineWidth=4;
ctx.beginPath();
ctx.moveTo(x3,y3-r);
ctx.arcTo(x0,y0,x1,y1,r);
ctx.arcTo(x1,y1,x2,y2,r);
ctx.arcTo(x2,y2,x3,y3,r);
ctx.arcTo(x3,y3,x0,y0,r);
ctx.stroke();
}
roundRect(10, 10, 200, 100, 10);
<canvas id="myCanvas" width="578" height="200"></canvas>
However the image of the 2 rectangles may be done using 2 simple canvas rectangles and an SVG filter like this:
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100)
ctx.fillRect(100, 100, 30, 30)
canvas{filter: url(#goo);}
<svg width="1" height="1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
<feColorMatrix in="blur" mode="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 40 -28" result="goo" />
</filter>
</defs>
</svg>
<canvas id="c" width="578" height="200"></canvas>
If you are not familiar with The Gooey Effect you may read this article: https://css-tricks.com/gooey-effect/
I hope this helps