19 lines
9.6 KiB
JavaScript
19 lines
9.6 KiB
JavaScript
|
export default function image(ctx) {
|
||
|
|
// Create an image based on a URL
|
||
|
|
var img = new Image();
|
||
|
|
img.src =
|
||
|
|
"https://dl.dropboxusercontent.com/s/m76annmw0nzz5fx/Unknown.jpg?dl=1";
|
||
|
|
img.crossOrigin = "anonymous";
|
||
|
|
img.onload = function () {
|
||
|
|
ctx.drawImage(img, 20, 20, 30, 30);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Create an image based on a foreignObject block.
|
||
|
|
var img2 = new Image();
|
||
|
|
img2.src =
|
||
|
|
"data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22164%22%20height%3D%2260%22%20data-reactroot%3D%22%22%3E%3Cstyle%3E%0A%20%20%20%20%20%20%3Aroot%20%7B%0A%20%20%20%20%20%20%20%20--theme-link-text%3A%20rgb(0%2C%20115%2C%20207)%3B%0A%20%20%20%20%20%20%20%20--theme-primary-border%3A%20rgb(205%2C%20205%2C%20205)%3B%0A%20%20%20%20%20%20%20%20--theme-light-border%3A%20rgb(241%2C%20241%2C%20241)%3B%0A%20%20%20%20%20%20%20%20--aha-yellow-400%3A%20rgb(255%2C%20228%2C%20142)%3B%0A%20%20%20%20%20%20%20%20--aha-gray-700%3A%20rgb(150%2C%20153%2C%20153)%3B%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20--aha-orange-600%3A%20rgb(249%2C%20147%2C%2025)%3B%0A%20%20%20%20%20%20%20%20--aha-orange-800%3A%20rgb(199%2C%20109%2C%200)%3B%0A%20%20%20%20%20%20%20%20--aha-red-600%3A%20rgb(235%2C%20121%2C%2087)%3B%0A%20%20%20%20%20%20%20%20--aha-blue-500%3A%20rgb(0%2C%20115%2C%20207)%3B%0A%20%20%20%20%20%20%20%20--theme-green-text%3A%20rgb(79%2C%20143%2C%2014)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%3C!--%20--%3E._editorContainer_19k9u_1%20%7B%0A%20%20display%3A%20block%3B%0A%7D%0A%0A._editor_19k9u_1%20%7B%0A%20%20display%3A%20flex%3B%0A%20%20flex-direction%3A%20column%3B%0A%20%20width%3A%20min-content%3B%0A%20%20overflow%3A%20hidden%3B%0A%20%20white-space%3A%20pre-wrap%3B%0A%20%20overflow-wrap%3A%20break-word%3B%0A%0A%20%20%2F*%20Default%20font%20*%2F%0A%20%20font-family%3A%20sans-serif%3B%0A%20%20font-size%3A%2014px%3B%0A%20%20line-height%3A%201.4%3B%0A%7D%0A._editor_19k9u_1._autoGrow_19k9u_18%2C%0A._editor_19k9u_1._autoGrow_19k9u_18%20.aha-editor-body%20%7B%0A%20%20white-space%3A%20pre%20!important%3B%0A%7D%0A._editor_19k9u_1._editing_19k9u_22%20%7B%0A%20%20overflow%3A%20visible%3B%0A%7D%0A%0A._editor_19k9u_1%20._content_19k9u_26%20%7B%0A%20%20margin%3A%20auto%3B%0A%20%20width%3A%20100%25%3B%0A%7D%0A%0A._editor_19k9u_1%20.aha-editor__pre-container%20%7B%0A%20%20position%3A%20relative%3B%0A%7D%0A%0A._editor_19k9u_1%20.aha-editor-context-toolbar-btn%20%7B%0A%20%20position%3A%20absolute%3B%0A%20%20right%3A%20-5px%3B%0A%20%20top%3A%203px%3B%0A%20%20z-index%3A%209999%3B%0A%20%20height%3A%2016px%3B%0A%7D%0A%0A._editor_19k9u_1%0A%20%20.aha-editor-context-toolbar-btn%3Ahover%0A%20%20.aha-editor-toolbar-btn%20%7B%0A%20%20background-color%3A%20var(--theme-editor-button-hovered)%20!important%3B%0A%20%20color%3A%20var(--aha-gray-900)%20!important%3B%0A%20%20cursor%3A%20pointer%3B%0A%7D%0A%0A._editor_19k9u_1%20.aha-editor-context-toolbar-btn%20button%20%7B%0A%20%20border%3A%20none%3B%0A%20%20border-radius%3A%204px%3B%0A%20%20padding%3A%200%3B%0A%20%20background-color%3A%20var(--theme-tertiary-background)%3B%0A%7D%0A%0A._editor_19k9u_1%20.aha-editor-context-toolbar-btn%20i%20%7B%0A%20%20margin-right%3A%205px%3B%0A%7D%0A%0A%2F*%0A%20*%20Text%20styles.%0A%20*%2F%0A._editor_19k9u_1%20p%2C%0A._editor_19k9u_1%20pre%20%7B%0A%20%20margin%3A%200%3B%0A%7D%0A%0A._editor_19k9u_1%20.align-left%20%7B%0A%20%20text-align%3A%20left%3B%0A%7D%0A%0A._editor_19k9u_1%20.align-center%20%7B%0A%20%20text-align%3A%20center%3B%0A%7D%0A%0A._editor_19k9u_1%20.align-right%20%7B%0A%20%20text-align%3A%20right%3B%0A%7D%0A%0A._editor_19k9u_1%20.align-justify%20%7B%0A%20%20text-align%3A%20justify%3B%0A%7D%0A%0A._editor_19k9u_1%20.inline-highlight%20%7B%0A%20%20background-color%3A%20var(--aha-yellow-400)%3B%0A%7D%0A%0A._editor_19k9u_1%20a%20%7B%0A%20%20word-wrap%3A%20break-word%3B%0A%7D%0A%0A._editor_19k9u_1%20code%20%7B%0A%20%20font-size%3A%20inherit%3B%0A%7D%0A%0A._editor_19k9u_1%20ul%2C%0A._editor_19k9u_1%20ol%20%7B%0A%20%20padding%3A%200%3B%0A%20%20list-style-position%3A%20inside%3B%0A%7D%0A._editor_19k9u_1%20ul%20%7B%0A%20%20margin%3A%200%200%200%201em%3B%0A%7D%0A._editor_19k9u_1%20ol%20%7B%0A%20%20margin%3A%200%200%200%202em%3B%20%2F*%20More%20space%20for%202%20digit%20numbers%20*%2F%0A%7D%0A._editor_19k9u_1%20ul%20p%2C%0A._editor_19k9u_1%20ol%20p%20%7B%0A%20%20text-align%3A%20left%20!important%3B%0A%7D%0A%0A._editor_19k9u_1%20ul%20%7B%0A%20%20list-style-type%3A%20disc%3B%0A%7D%0A%0A._editor_19k9u_1%20ul.checklist%20%7B%
|
||
|
|
img2.onload = function () {
|
||
|
|
ctx.drawImage(img2, 20, 100, 60, 30);
|
||
|
|
};
|
||
|
|
}
|