Summary  
This chapter explains how to load and display images on a canvas by creating a JavaScript Image object and using it in a Konva.Image node, how to move, resize, and transform those images, and how to handle cross-origin (CORS) restrictions to allow canvas export.

General domain of usage  
Interactive whiteboard tools

When you want to build interactive whiteboard or annotation tools, the ability to load, display, and manipulate images is essential. In Konva.js, you can add images to the canvas just like shapes or text, but there are some unique considerations. Loading images involves creating a JavaScript `Image` object, setting its source, and then using the loaded image as the source for a `Konva.Image` node. Once rendered, images can be moved, resized, and transformed just like other elements.

However, you must pay close attention to **cross-origin policies**. Browsers restrict how images loaded from different domains can be used, especially when you want to export the canvas as an image. If you load an image from another domain without proper CORS headers, you will not be able to export the canvas content due to security restrictions. Always make sure the images you use are either hosted on your own domain or have CORS enabled.

Now, let's see how you can load and manipulate an image on the canvas in a practical example.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAgICA8c3R5bGU+CiAgICAgICNjb250YWluZXIgewogICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgICAgICAgbWFyZ2luLXRvcDogMTZweDsKICAgICAgfQogICAgICAuaW5zdHJ1Y3Rpb25zIHsKICAgICAgICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgICAgICAgbWFyZ2luLXRvcDogMTJweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJpbnN0cnVjdGlvbnMiPgogICAgICBEcmFnIG9yIHJlc2l6ZSB0aGUgaW1hZ2Ugb24gdGhlIGNhbnZhcyBiZWxvdy4KICAgIDwvZGl2PgogICAgPGRpdiBpZD0iY29udGFpbmVyIj48L2Rpdj4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9rb252YUA5L2tvbnZhLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Ly8gQ3JlYXRlIHN0YWdlIGFuZCBsYXllcgpjb25zdCBzdGFnZSA9IG5ldyBLb252YS5TdGFnZSh7CiAgY29udGFpbmVyOiAiY29udGFpbmVyIiwKICB3aWR0aDogNjAwLAogIGhlaWdodDogNDAwCn0pOwoKY29uc3QgbGF5ZXIgPSBuZXcgS29udmEuTGF5ZXIoKTsKc3RhZ2UuYWRkKGxheWVyKTsKCi8vIExvYWQgaW1hZ2UKY29uc3QgaW1hZ2VPYmogPSBuZXcgd2luZG93LkltYWdlKCk7CmltYWdlT2JqLmNyb3NzT3JpZ2luID0gIkFub255bW91cyI7IC8vIFNldCBDT1JTIGZvciBzYWZlIGV4cG9ydAoKaW1hZ2VPYmoub25sb2FkID0gZnVuY3Rpb24gKCkgewogIGNvbnN0IGtvbnZhSW1hZ2UgPSBuZXcgS29udmEuSW1hZ2UoewogICAgeDogNTAsCiAgICB5OiA1MCwKICAgIGltYWdlOiBpbWFnZU9iaiwKICAgIHdpZHRoOiAyMDAsCiAgICBoZWlnaHQ6IDE1MCwKICAgIGRyYWdnYWJsZTogdHJ1ZQogIH0pOwoKICBsYXllci5hZGQoa29udmFJbWFnZSk7CiAgbGF5ZXIuZHJhdygpOwoKICAvLyBBZGQgdHJhbnNmb3JtZXIgZm9yIHJlc2l6aW5nCiAgY29uc3QgdHIgPSBuZXcgS29udmEuVHJhbnNmb3JtZXIoewogICAgbm9kZXM6IFtrb252YUltYWdlXSwKICAgIGVuYWJsZWRBbmNob3JzOiBbInRvcC1sZWZ0IiwgInRvcC1yaWdodCIsICJib3R0b20tbGVmdCIsICJib3R0b20tcmlnaHQiXSwKICAgIGJvdW5kQm94RnVuYzogZnVuY3Rpb24gKG9sZEJveCwgbmV3Qm94KSB7CiAgICAgIC8vIExpbWl0IHJlc2l6ZSB0byBtaW5pbXVtIHNpemUKICAgICAgaWYgKG5ld0JveC53aWR0aCA8IDMwIHx8IG5ld0JveC5oZWlnaHQgPCAzMCkgewogICAgICAgIHJldHVybiBvbGRCb3g7CiAgICAgIH0KICAgICAgcmV0dXJuIG5ld0JveDsKICAgIH0KICB9KTsKICBsYXllci5hZGQodHIpOwoKICBrb252YUltYWdlLm9uKCJ0cmFuc2Zvcm0iLCBmdW5jdGlvbiAoKSB7CiAgICAvLyBLZWVwIGltYWdlIHNpemUgaW4gc3luYyB3aXRoIHRyYW5zZm9ybWVyCiAgICBrb252YUltYWdlLndpZHRoKGtvbnZhSW1hZ2Uud2lkdGgoKSAqIGtvbnZhSW1hZ2Uuc2NhbGVYKCkpOwogICAga29udmFJbWFnZS5oZWlnaHQoa29udmFJbWFnZS5oZWlnaHQoKSAqIGtvbnZhSW1hZ2Uuc2NhbGVZKCkpOwogICAga29udmFJbWFnZS5zY2FsZVgoMSk7CiAgICBrb252YUltYWdlLnNjYWxlWSgxKTsKICB9KTsKfTsKCi8vIFVzZSBhIENPUlMtZW5hYmxlZCBkZW1vIGltYWdlCmltYWdlT2JqLnNyYyA9ICJodHRwczovL2tvbnZhanMub3JnL2Fzc2V0cy9saW9uLnBuZyI7

When loading images in Konva.js, what must be considered to avoid security issues when exporting the canvas?

Build interactive canvas based applications using Konva JS and JavaScript. Learn to work with stages, layers, shapes, events, drawing tools, text, and images to create rich canvas experiences. Apply these skills to design whiteboard style editors, diagram tools, and other custom interactive canvas interfaces.

Learn the core ideas behind Konva.js and how its stage and layer model works. Build a foundation for drawing and manipulating shapes on the canvas with JavaScript.

Add interactivity to canvas elements by enabling dragging, resizing, and transforming shapes. Handle user events to make the canvas respond to clicks, drags, and other actions.

Create whiteboard style features using drawing tools, editable text, and images. Combine these elements to build simple diagram, annotation, or sketching interfaces.

Use grouping and layer management to organize complex scenes and prepare them for saving or export. Apply everything learned to build practical projects such as a diagram editor and a collaborative style whiteboard prototype.

Working with Images

Working with Images