通过对象设置HTML画布上下文

Question

到现在为止，我已经设置HTML画布上下文教程事情是这样的显示，如：

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

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

我想知道是否可以通过将具有正确属性的对象传递给其中一种方法来设置画布的上下文？例如：

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


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

canvas.setContext(context);

原因是我正在创建一个有角度的自定义画布。例如，我controller将获取<canvas>元素。中的方法service将回调要为画布设置的上下文对象。

自定义画布将转换为PNG，并设置为iconGoogle Maps上的标记。标记已添加到的地图中service：

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

因此，我希望将canvas元素传递到此功能中（已经设置了上下文），并将它的PNG等效项设置为Marker icon。

编辑：

现在，我意识到除了设置属性（即fillStyle）外，我还调用了contexts方法（即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"

因此，在您的情况下，在将画布元素的引用传递给函数之后，将来任何时候都可以安全地依赖上下文addMarkerToMap。