javascript - Are there any shorter way to write codes for canvas html? I want to avoid using images if possible -

how simplify code without repeating context? there library canvas api? tried using with(context), throws error because using 'use strict'. there way around this?

    context.save();         context.beginpath();         context.settransform(1, 0, 0, 1, 0, 0);         context.translate(alien.x, alien.y);         context.rotate(0);         context.moveto(-15, 0);         context.lineto(-15, 5);         context.beziercurveto(-15, -10, 15, -10, 15, 5);         context.lineto(15, 0);         context.lineto(-15, 0);         context.lineto(-15, 5);         context.lineto(-20, 5);         context.lineto(-25, 10);         context.lineto(25, 10);         context.lineto(20, 5);         context.lineto(-20, 5);         context.moveto(10, 10);         context.lineto(10, 15);         context.lineto(15, 15);         context.lineto(15, 10);         context.moveto(-10, 10);         context.lineto(-10, 15);         context.lineto(-15, 15);         context.lineto(-15, 10);         context.strokestyle = '#fff';         context.stroke();         context.closepath();         context.restore(); 

here's 1 way concisely specify canvas path data using svg-like syntax.

i yanked following svgpath-to-canvaspath cross-compiler wrote while back. nice thing svg path data it's short & concise. uses single letter define drawing command , combines commands single string.

// canvas path drawing commands represented single command letters   m == moveto   l == lineto   q == quadraticcurveto   c == beziercurveto   r == rect   == arc   z == closepath   y == clip 

so complex canvas path represented single short string this:

var data='m-15,0 l-15,5 c-15,-10,15,-10,15,5 l15,0 l-15,0 l-15,5 l-20,5 l-25,10 l25,10 l20,5 l-20,5 m10,10 l10,15 l15,15 l15,10 m-10,10 l-10,15 l-15,15 l-15,10';

here's example code , demo parses & draws data string canvas:

var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");  var cw=canvas.width;  var ch=canvas.height;      var commandexpander={    m: 'moveto',    l: 'lineto',    q: 'quadraticcurveto',    c: 'beziercurveto',    r: 'rect',    a: 'arc',    z: 'closepath',    y: 'clip'  }    // path written single string  var data='m-15,0  l-15,5  c-15,-10,15,-10,15,5  l15,0  l-15,0  l-15,5  l-20,5  l-25,10  l25,10  l20,5  l-20,5  m10,10  l10,15  l15,15  l15,10  m-10,10  l-10,15  l-15,15  l-15,10';    // convert single data string separate commands  var commands=parsedata(data);    // execute drawing commands  definepath(commands);    // stroke result  ctx.stroke();      // take single string containing path data  // break separate commands , put commands array  // 1 command consists of letter , command arguments  function parsedata(data){      var commands=[];      var cmdsegments = data.match(/[a-z][^a-z]*/ig);              for(var i=0;i<cmdsegments.length;i++){        var segment=cmdsegments[i];        var command={letter:null,args:null};      commands.push(command);        command.letter=segment.slice(0,1);        command.args=segment      .slice(1)      .trim()      .replace(/-+/g,' -')      .trim()      .replace(/\s+/g,',')      .replace(/,+/g,',')      .split(",")      .filter(function(e){return e!==''});        for(var a=0;a<command.args.length;a++){        command.args[a]=number(command.args[a]);      }      }      return(commands);     }      // execute commands in cmds[] array  function definepath(cmds){    ctx.beginpath();    for(var i=0;i<cmds.length;i++){      var command=commandexpander[cmds[i].letter];      var args=cmds[i].args;      ctx[command].apply(ctx,args);    }  }

body{ background-color: ivory; padding:10px; }  #canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>