vaya, hace tiempo que solucioné este tema (aquí mi primera figura en canvas, no demasiada profesional)
Código HTML:
<canvas id="dibujo"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('dibujo');
var ctx = canvas.getContext('2d');
//carrocería
ctx.fillStyle="red";
ctx.beginPath();
ctx.moveTo(60, 35);
ctx.lineTo(90, 19.5);
ctx.lineTo(105,14);
ctx.lineTo(140,11);
ctx.lineTo(150,12);
ctx.lineTo(165,13);
ctx.lineTo(170,15);
ctx.lineTo(190,30);
ctx.lineTo(195,30);
ctx.lineTo(210,17);
ctx.lineTo(230,17);
ctx.lineTo(223,30);
ctx.lineTo(226,30);
ctx.lineTo(225,35);
ctx.lineTo(225,52);
ctx.lineTo(227.5,55);
ctx.lineTo(227.5,74);
ctx.lineTo(225,76);
ctx.lineTo(200,78);
ctx.arc(180,70,20,0, 3.14,true);
ctx.lineTo(160,80);
ctx.lineTo(70,80);
ctx.arc(50,70,20,0, 3.14,true);
ctx.lineTo(30,80);
ctx.lineTo(1.5,80);
ctx.lineTo(0,77);
ctx.lineTo(0,75);
ctx.lineTo(2,72);
ctx.lineTo(2,65);
ctx.lineTo(0,62);
ctx.lineTo(0,45);
ctx.lineTo(6,42);
ctx.lineTo(30,37.3);
ctx.lineTo(60,35);
ctx.closePath();
ctx.fill();
//ruedas
ctx.fillStyle="black";
ctx.beginPath();
ctx.moveTo(162,70);
ctx.arc(180,70,19,3.14, -3.14,true);
ctx.moveTo(32,70);
ctx.arc(50,70,19,3.14, -3.14,true);
ctx.closePath();
ctx.fill();
//lantas
ctx.lineWidth="2";
ctx.beginPath();
ctx.strokeStyle="lightgrey";
ctx.moveTo(164,70);
ctx.arc(180,70,16,3.14, -3.14,true);
ctx.moveTo(34,70);
ctx.arc(50,70,16,3.14,-3.14,true);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle="lightgrey";
ctx.moveTo(164,70);
ctx.lineTo(196,70);
ctx.moveTo(180,54);
ctx.lineTo(180,86);
ctx.moveTo(169,59);
ctx.lineTo(191,81);
ctx.moveTo(191,59);
ctx.lineTo(169,81);
ctx.moveTo(34,70);
ctx.lineTo(66,70);
ctx.moveTo(50,54);
ctx.lineTo(50,86);
ctx.moveTo(39,59);
ctx.lineTo(61,81);
ctx.moveTo(61,59);
ctx.lineTo(39,81);
ctx.stroke();
ctx.closePath();
ctx.fillStyle="lightgray";
ctx.beginPath();
ctx.moveTo(164,70);
ctx.arc(180,70,8,3.14, -3.14,true);
ctx.moveTo(34,70);
ctx.arc(50,70,8,3.14,-3.14,true);
ctx.closePath();
ctx.fill();
//faros
ctx.fillStyle="white";
ctx.beginPath();
ctx.moveTo(4,51);
ctx.lineTo(23,51);
ctx.lineTo(23,44);
ctx.lineTo(4,47);
ctx.moveTo(224,35);
ctx.lineTo(224,43);
ctx.lineTo(214,43);
ctx.lineTo(218,35);
ctx.lineTo(224,35);
ctx.closePath();
ctx.fill();
//adornos
ctx.fillStyle="black";
ctx.beginPath();
ctx.moveTo(6,72);
ctx.lineTo(10,73);
ctx.lineTo(15,73);
ctx.lineTo(13,65);
ctx.lineTo(5,65);
ctx.lineTo(5,71);
ctx.lineTo(6,72);
ctx.closePath();
ctx.fill();
ctx.fillStyle="black";
ctx.beginPath();
ctx.arc(55,67,25,0,Math.PI*1.7,true);
ctx.arc(50,69,25,Math.PI*1.65,Math.PI*1.97,false);
ctx.closePath();
ctx.fill();
//puertas
ctx.lineWidth="0.5";
ctx.strokeStyle="silver";
ctx.moveTo(81,70);
ctx.lineTo(81,45);
ctx.lineTo(85,30);
ctx.lineTo(105,19);
ctx.lineTo(140,16);
ctx.lineTo(150,17);
ctx.lineTo(165,18);
ctx.lineTo(170,20);
ctx.lineTo(175,24);
ctx.lineTo(178,28);
ctx.lineTo(179,30);
ctx.lineTo(180,32);
ctx.lineTo(180,33);
ctx.lineTo(178,38);
ctx.lineTo(174,44);
ctx.lineTo(168,50);
ctx.lineTo(160,59);
ctx.lineTo(160,60);
ctx.lineTo(159,62);
ctx.lineTo(158,63);
ctx.lineTo(156,66);
ctx.lineTo(153,68);
ctx.lineTo(150,70);
ctx.lineTo(81,70);
ctx.moveTo(130,70);
ctx.lineTo(130,45);
ctx.lineTo(131,30);
ctx.lineTo(132,17);
ctx.stroke();
</script>
pero esa página que has aportado está genial. muchas gracias