Skip to content

Instantly share code, notes, and snippets.

@kenyk7

kenyk7/index.html

Created July 12, 2022 02:28
Show Gist options
  • Save kenyk7/e0d1e21dfc51f3851875faf875b316bc to your computer and use it in GitHub Desktop.
Save kenyk7/e0d1e21dfc51f3851875faf875b316bc to your computer and use it in GitHub Desktop.
Download ZIP
Canvas draw
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="90">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'red';
ctx.shadowBlur = 6;
ctx.shadowOffsetY = -3;
ctx.shadowColor = 'rgba(0,0,0,0.15)';
var sw = 400;
var sh = 90;
var mt = 30;
var pt = 10;
ctx.moveTo(0, mt);
ctx.quadraticCurveTo(sw * 0.20, pt, sw * 0.35, pt);
ctx.quadraticCurveTo(sw * 0.40, pt, sw * 0.40, mt);
ctx.arc(sw * 0.50, mt, 40, Math.PI, 0, true);
ctx.quadraticCurveTo(sw * 0.60, pt, sw * 0.65, pt);
ctx.quadraticCurveTo(sw * 0.80, pt, sw, mt);
ctx.lineTo(sw, sh);
ctx.lineTo(0, sh);
ctx.lineTo(0, mt);
ctx.fill();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment