JSFiddle - React, Tailwind, and code Playground

by _nderscore

HTML

<canvas id=v><script>_="with(c=v.getContexZ'2d'))scalXw=(v.width=v.height=prompZtzsavXrzrotatX.42)});translate[}))/12,wWZ7]6W`~j~^arc(YY5]Y6))_j1W^`1_q4.2,Y6,6Wr(ZY6|Y-11,3,6.2|b-.5_-2,1,2_qb1.5_-1]1,1.5)|_restorXqz=function[{qclearRecZjmoveTo(-7]b~r(Z-7]`lineTo(6,_)W^strokX].5,[(x,y)Zt(Y0,Xe(W),";for(i in g="WXYZ[]^_`bjqz|")with(_.split(g[i]))_=join(pop());eval(_)</script>
<!--
Crushed solution: 376 bytes

Original golfed source before using before using crush: 395 bytes

r=function() was changed to r=function(x,y) to optimize for compression

<body onload=with(c=v.getContext('2d'))scale(w=(v.width=v.height=prompt(t=function(x,y){save(r=function(){rotate(.42)});translate(x,y)}))/12,w),t(7.5,6),lineTo(6,~moveTo(-7.5,~stroke(arc(0,0,5.5,0,6)))),moveTo(-7.5,1),stroke(lineTo(6,1)),clearRect(4.2,0,6,6),r(t(0,6)),restore(clearRect(0,-11,3,6.2)),restore(clearRect(~r(t(-7.5,-.5)),-2,1,2)),clearRect(~r(t(-7.5,1.5)),-1.5,1,1.5)><canvas id=v>

Beautified script:

with(c = v.getContext('2d')) 
    scale(w = (v.width = v.height = prompt(t = function (x, y) {
        save(r = function () {
            rotate(.42)
        });
        translate(x, y)
    })) / 12, w),
    t(7.5, 6),
    lineTo(6, ~moveTo(-7.5, ~stroke(arc(0, 0, 5.5, 0, 6)))),
    moveTo(-7.5, 1),
    stroke(lineTo(6, 1)),
    clearRect(4.2, 0, 6, 6),
    r(t(0, 6)),
    restore(clearRect(0, -11, 3, 6.2)),
    restore(clearRect(~r(t(-7.5, -.5)),
    -2, 1, 2)),
    clearRect(~r(t(-7.5, 1.5)),
    -1.5, 1, 1.5)

-->