１対0.5で横と縦の比率を変形しています。
５０％の透明度にしています。
ctx.globalAlpha=0.2;
ctx.scale(1,0.5);
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(30, 80, 20, 0, Math.PI*2, false)
ctx.fill();
ctx.globalAlpha=1;
ctx.strokeRect(5,5,25,15);
下のコードを試してください。透明度とクリアが必要なのが分かります。
ctx.strokeStyle = "#FF0000";
ctx.strokeRect(15,40,25,15);
ctx.globalAlpha=0.5;
ctx.scale(1,0.5);
ctx.beginPath();
ctx.fillStyle = "black";
ctx.arc(30, 80, 20, 0, Math.PI*2, false)
ctx.fill();
ctx.setTransform(1,0,0,1,0,0);
ctx.globalAlpha=1;
// ctx.scale(1,1);
ctx.beginPath();
ctx.fillStyle = "#0000FF";
ctx.rect(10,180,40,40);
ctx.fill();
以下のpythonのコーデイングをjavascriptで実現してみてください。
カー（車の下）に影をつけるコーデイングです。
def draw_shadow(bg, x, y, siz):
shadow = pygame.Surface([siz, siz/4])
shadow.fill(RED)
shadow.set_colorkey(RED)
shadow.set_alpha(128)
pygame.draw.ellipse(shadow, BLACK, [0,0,size,size/4])
bg.blit(shadow, [x-siz/2, y-siz/4])
