Set HTML canvas context through an object

Question

So far I have set the HTML canvas context in the tutorials shown , for example:

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

ctx.font = "15px calibri";
...

I was wondering, is it possible to set the canvas context by passing one of its methods into an object with the correct attributes? For instance:

var canvas = document.getElementById("canvas");


var context = {
    font: "15px calibri",
    ...
);

canvas.setContext(context);

The reason for this is to create a custom canvas in angular. For example, mine controllerwill receive an item <canvas>. Method serviceB will call the return context object specified for the canvas.

The custom canvas must be converted to PNG and set as a iconmarker on Google Maps. A marker is added to cards in service:

addMarkerToMap: function(position, map, canvas) {
    new google.maps.Marker({
        position: position,
        map: map,
        icon: canvas.toDataURL("image/png")
    });
}

canvas fucntion ( ) PNG icon.

EDIT:

, , (.. fillStyle), (.. beginPath()).
, ,

Answer 1

, , , :

const canvas1 = document.getElementById('myCanvas');
const ctx = canvas1.getContext('2d');

ctx.font = '15px Calibri';

const canvas2 = document.getElementById('myCanvas');
console.log(canvas2.getContext('2d').font); // -> "15px Calibri"

, , canvas addMarkerToMap.

Answer 2

- , , , , canvas , " ".

, , HTML ( - ).

, , jQuery, - :

// Just a new canvas, you could even clone the old one
var canvas1 = $('<canvas/>', {
  id: 'canvas1',
  height: 500,
  width: 200,
  font: '15 px'
});
document.body.appendChild(canvas1);