title: Set HTML canvas context via object
body: <p>Up until now, I have set HTML canvas context the way in tutorials it is <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" rel="nofollow noreferrer">shown</a>, like:</p>
  
  <pre><code>var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d");
  
  ctx.font = "15px calibri";
  ...
  </code></pre>
  
  <p>I was wondering whether it is possible to set the context of the canvas by passing in an object with the correct attributes to one of it's methods? For example:</p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  
  
  var context = {
      font: "15px calibri",
      ...
  );
  
  canvas.setContext(context);
  </code></pre>
  
  <p>The reason for this is I am creating a custom canvas in angular. For example, my <code>controller</code> will get the <code>&lt;canvas&gt;</code> element. A method in a <code>service</code> will callback the context object to set for the canvas.</p>
  
  <p>The custom canvas is to be converted to PNG and set as the <code>icon</code> for a Marker on Google Maps. The marker is added to the maps in the <code>service</code>:</p>
  
  <pre><code>addMarkerToMap: function(position, map, canvas) {
      new google.maps.Marker({
          position: position,
          map: map,
          icon: canvas.toDataURL("image/png")
      });
  }
  </code></pre>
  
  <p>So I am hoping to pass in the <code>canvas</code> element into this fucntion <em>(with it's context already set)</em> and just set it's PNG equivalent as the Marker <code>icon</code>.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I've now realised that other then just setting attributes (i.e. <code>fillStyle</code>), I am invoking the contexts methods (i.e. <code>beginPath()</code>).<br>I think that this will make it much harder to accomplish what I am trying</p>