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%0A%20%20list-style-type%3A%20none%3B%0A%7D%0A%0A._editor_19k9u_1%20li.checklist-item--checked%2C%0A._editor_19k9u_1%20li.checklist-item--unchecked%20%7B%0A%20%20list-style-type%3A%20none%3B%0A%7D%0A%0A._editor_19k9u_1%20li%20%7B%0A%20%20box-sizing%3A%20border-box%3B%0A%20%20line-height%3A%201.4%3B%20%2F*%20Must%20be%20same%20as%20%26lt%3Bp%26gt%3B%20line-height.%20*%2F%0A%20%20list-style-position%3A%20outside%3B%0A%20%20font-style%3A%20normal%3B%0A%20%20font-weight%3A%20normal%3B%0A%20%20padding%3A%200%3B%0A%20%20margin%3A%200%3B%0A%7D%0A%0A._editor_19k9u_1%20li.checkbox%20%7B%0A%20%20padding-left%3A%200%3B%0A%20%20min-height%3A%20auto%3B%0A%7D%0A%0A._editor_19k9u_1%20li.checkbox%20input%5Btype%3D%26%23x27%3Bcheckbox%26%23x27%3B%5D%20%7B%0A%20%20margin%3A%203px%200%200%20-18px%3B%0A%20%20position%3A%20absolute%3B%0A%20%20margin-top%3A%200%3B%0A%20%20margin-left%3A%20-15px%3B%0A%7D%0A%0A._editor_19k9u_1%20li%20.checklist-item__indicator%20%7B%0A%20%20margin%3A%200%3B%0A%20%20position%3A%20absolute%3B%0A%20%20margin-left%3A%20-1.5ch%3B%0A%7D%0A%0A._editor_19k9u_1%20code%20%7B%0A%20%20white-space%3A%20inherit%3B%0A%7D%0A%0A._editor_19k9u_1%20table%20%7B%0A%20%20width%3A%20100%25%3B%0A%20%20word-wrap%3A%20break-word%3B%0A%20%20table-layout%3A%20fixed%3B%0A%7D%0A%0A._editor_19k9u_1%20td%20%7B%0A%20%20position%3A%20relative%3B%0A%20%20border%3A%201px%20solid%20var(--theme-primary-border)%3B%0A%20%20padding%3A%208px%3B%0A%20%20vertical-align%3A%20top%3B%0A%7D%0A%0A._editor_19k9u_1%20blockquote%20%7B%0A%20%20padding%3A%203px%200%203px%2010px%3B%0A%20%20border-left%3A%204px%20solid%20var(--theme-light-border)%3B%0A%7D%0A%0A._editor_19k9u_1%20a%20%7B%0A%20%20color%3A%20var(--theme-link-text)%3B%0A%20%20text-decoration%3A%20underline%3B%0A%7D%0A%0A._editor_19k9u_1%20code%20%7B%0A%20%20padding%3A%202px%204px%3B%0A%20%20color%3A%20%23d14%3B%0A%20%20background-color%3A%20%23f7f7f9%3B%0A%20%20border%3A%201px%20solid%20%23e1e1e8%3B%0A%20%20border-radius%3A%203px%3B%0A%7D%0A%0A._editor_19k9u_1%20pre%20%7B%0A%20%20padding%3A%202px%204px%3B%0A%20%20margin%3A%200%3B%0A%20%20display%3A%20block%3B%0A%20%20background-color%3A%20%23f7f7f9%3B%0A%20%20border%3A%201px%20solid%20%23e1e1e8%3B%0A%20%20border-radius%3A%203px%3B%0A%20%20word-break%3A%20break-all%3B%0A%20%20white-space%3A%20break-spaces%3B%0A%7D%0A._editor_19k9u_1%20pre%20code%20%7B%0A%20%20padding%3A%200%3B%0A%20%20color%3A%20inherit%3B%0A%20%20background-color%3A%20transparent%3B%0A%20%20border%3A%200%3B%0A%7D%0A%0A%2F*%20prism.js%20styles%20*%2F%0A._editor_19k9u_1%20.token.comment%2C%0A._editor_19k9u_1%20.token.prolog%2C%0A._editor_19k9u_1%20.token.doctype%2C%0A._editor_19k9u_1%20.token.cdata%20%7B%0A%20%20color%3A%20slategray%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.punctuation%20%7B%0A%20%20color%3A%20%23999%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.namespace%20%7B%0A%20%20opacity%3A%200.7%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.property%2C%0A._editor_19k9u_1%20.token.tag%2C%0A._editor_19k9u_1%20token.boolean%2C%0A._editor_19k9u_1%20.token.number%2C%0A._editor_19k9u_1%20.token.constant%2C%0A._editor_19k9u_1%20.token.symbol%2C%0A._editor_19k9u_1%20.token.deleted%20%7B%0A%20%20color%3A%20%23905%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.selector%2C%0A._editor_19k9u_1%20.token.attr-name%2C%0A._editor_19k9u_1%20.token.string%2C%0A._editor_19k9u_1%20.token.char%2C%0A._editor_19k9u_1%20.token.builtin%2C%0A._editor_19k9u_1%20.token.inserted%20%7B%0A%20%20color%3A%20var(--theme-green-text)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.operator%2C%0A._editor_19k9u_1%20.token.entity%2C%0A._editor_19k9u_1%20.token.url%2C%0A._editor_19k9u_1%20.language-css%20.token.string%2C%0A._editor_19k9u_1%20.style%20.token.string%20%7B%0A%20%20color%3A%20var(--aha-orange-800)%3B%0A%20%20%2F*%20This%20background%20color%20was%20intended%20by%20the%20author%20of%20this%20theme.%20*%2F%0A%20%20background%3A%20hsla(0%2C%200%25%2C%20100%25%2C%200.5)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.atrule%2C%0A._editor_19k9u_1%20.token.attr-value%2C%0A._editor_19k9u_1%20.token.keyword%20%7B%0A%20%20color%3A%20var(--aha-blue-500)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.function%2C%0A._editor_19k9u_1%20.token.class-name%20%7B%0A%20%20color%3A%20var(--aha-red-600)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.regex%2C%0A._editor_19k9u_1%20.token.important%2C%0A._editor_19k9u_1%20.token.variable%20%7B%0A%20%20color%3A%20var(--aha-orange-600)%3B%0A%7D%0A%0A._editor_19k9u_1%20.token.important%2C%0A._editor_19k9u_1%20.token.bold%20%7B%0A%20%20font-weight%3A%20bold%3B%0A%7D%0A._editor_19k9u_1%20.token.italic%20%7B%0A%20%20font-style%3A%20italic%3B%0A%7D%0A%0A._editor_19k9u_1%20.frameText%20%7B%0A%20%20color%3A%20var(--aha-gray-700)%3B%0A%7D%0A%3C%2Fstyle%3E%3CforeignObject%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22min-height%3A30px%3Bwidth%3A82px%3Bfont-size%3A14px%3Bbox-sizing%3Aborder-box%3Bpadding%3A5px%205px%205px%205px%3Btransform-origin%3Atop%20left%3Btransform%3Ascale(2)%22%20class%3D%22_editor_19k9u_1%20_autoGrow_19k9u_18%22%3E%3Cdiv%20class%3D%22_content_19k9u_26%22%3E%3Cp%20style%3D%22text-align%3Acenter%22%3EHello%20World%3C%2Fp%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E";
|
|
img2.onload = function () {
|
|
ctx.drawImage(img2, 20, 100, 60, 30);
|
|
};
|
|
}
|