How to copy a picture onto a canvas

There are also live events, courses curated by job role, and more.

Images

Lunacy supports these image formats: PNG , JPG , JPEG , WEBP , BMP , ICO , GIF , SVG . The TIFF format is not supported.

There are several ways to add images to the canvas:

• Using the Image tool to add images from your computer
• Importing images from Lunacy’s Photos library
• Drag-and-dropping images from the file explorer
• Copying images from your desktop or browser and paste it onto the canvas
• Importing images from your web browser via link

Using the Image tool

To add images via the Image tool:

1. Press M or select the Image tool on the toolbar.
2. In the Open dialog box, choose one or multiple image files.
3. Click on the canvas to place the image to add the image in its original size or click and drag to adjust the image size before placing it on the canvas.

The drag-and-drop method

You can always simply drag and drop images from your files into Lunacy.

Alternatively, you can right-click on an image in your file explorer or browser and select Copy image, then simply paste it onto the canvas.

The Photos library

To use images from the Lunacy Photos library:

1. Open the Photos tab in the left panel.
2. Choose an image, then drag and drop it onto the canvas.

Tip: Use low-res photos, PNG icons, and illustrations for free as long as you include a link to icons8.com in your final work.

To access high-res photos and editable SVGs without mandatory attribution use our graphics without mandatory attribution, consider our graphics subscription. By subscribing, you’ll be supporting our artists and contributing to Lunacy’s further development.

Importing images from the browser

There are two ways to import an image from your browser via link:

• Right-click the image in your web browser and select Copy image address from the context menu. Switch to Lunacy, press M for the Image tool, then paste the image URL in the file name input field. Finally, click Open. OR
• Right-click the image in your web browser and select Copy image address from the context menu. Switch to Lunacy, right click over the canvas, and select Paste here from the context menu. Click OK in the Paste as image dialog box. If you click Cancel, Lunacy will paste the text of the image address.

Note: This method works only when a web site provides direct links to images with an image extension at the end ( .jpg , .png , etc.)

Adding image fills

You can also add images directly to your layers (including shapes, frames, and text layers). They will act as a layer background you can replace or modify anytime.

To add an Image fill:

1. Make sure your layer has a fill. If it doesn’t, click + next to the Fill section of the right panel with a layer selected.
2. Click on the color swatch in the Fill section to open up the color picker.
3. In the top bar of the color picker, click .
4. Select an image from on your computer and click Open.

Use the drop-down list below the Choose image button to select the fill method:

• Fill. Adjusts the image size to the layer’s width.
• Fit. Adjusts the image size to fit the layer’s height.
• Stretch. Stretches the image to fit the layer’s width and height.
• Tile. Duplicates the image in a tile pattern to fit the layer. The size of tiles is adjustable.

Replacing images

There are two ways you can replace images.

The first is to select an image and click the Replace image button in the Image section in the right panel. This only works for images added directly to the canvas.

To replace an image fill, select the layer with the fill, click the swatch in the Fill section, then Choose image.

Tip: You can also use these methods when you need to replace your current image with an image from the internet. Just paste the URL of the new image into the File name field of the Open dialog box and click Open.

Another quick way to replace an image or image fill is by holding down Ctrl / ⌘ and drag-and-dropping an image from your desktop or the Photos library onto a layer, like in the demo below.

Read the full list of Lunacy’s tips and tricks.

Editing images

Cropping images

To crop an image:

1. Select the image.
2. Press Enter or click on the context toolbar to enable Edit mode.
3. Crop the image, then press Enter again or click the Apply editing button in the right panel.

Image upscaler

Whenever you need to enhance the resolution and quality of an image, use the AI-powered Icons8 Image Upscaler built into Lunacy.

When you add an image to your document, the Upscale image prompt appears above it. Click it and wait a few seconds as the Upscaler enhances the image.

Note: The feature only is available to users with any paid subscription to Icons8 graphic assets.

Background remover

To remove a background from an image:

1. Select the image.
2. In the right panel, click Remove background.

Cutting out a part of an image

You can cut out part of an image so it becomes a new image layer that you can adjust as you like.

To cut out a part of an image:

1. Select the image.
2. Press Enter to enable Edit mode.
3. Choose one of the selection tools that show up below the image:
   • Scissors. With scissors, you can make a selection with any shape (rectangle, ellipse, triangle, etc.) by selecting the shape on the toolbar or pressing the corresponding shape shortcut.
   • Freeform lasso. With the freeform lasso, draw freehand selections on parts of the image, just like with the Pencil tool. To close the selection border, just release the mouse button.
   • Polygon lasso. Use the polygonal lasso to make selections using paths, similar to using the Pen tool. To disable snapping while drawing the selection, hold down Ctrl / ⌘ .
4. Once you have an area selected:
   • Press Delete to remove it completely.
   • Move the selection to where you want it to be. In this case, Lunacy creates a vector shape with an image fill that corresponds to your selection and automatically fills the emptied area with the color that’s prevalent along the selection border.

Image adjustment

Change the hue, saturation, contrast, and other properties of your images.

1. Select one or several image layers.
2. Click + next to Image adjust in the right panel.

These adjustments are all reversible. You can discard all changes and restore the original image by clicking the Reset values ( ) button next to the section header.

How to copy a picture onto a canvas

You can import images and selections into Concepts in many ways, both from the Gallery and directly onto the canvas.

You can have one or many images on the canvas at a time, and, as with all elements in Concepts, each image can be selected, moved across the canvas or between layers, adjusted for opacity, size or rotation, drawn on, masked or duplicated.

Importing Selections allows you to draw elements in one drawing, copy them to the clipboard, and paste them into another drawing for quicker work.

You can only import native .concepts files into Concepts at this time. This includes .concepts files from Windows. (Note that iOS uses .CPT files, you can’t import from iOS yet).

From the Gallery

Tap the Plus (+) button in the top left corner, or tap+hold the Plus (+) button in the bottom right corner, and find Import.

1. Import – You can import a JPG and PNG as well as a Concepts file. The image will open inside a new Concepts drawing.

2. Clipboard – “Paste from Clipboard” will create a new drawing of any content currently on your device clipboard that we support. This includes selections you make in-app that you’ve copied to the clipboard, or images copied in a web browser.

3. Camera – “Take a Photo” uses the device’s camera, and creates a new drawing with the photo in it.

4. Drag & Drop – You can also drag and drop files into the Gallery from a supported browser or app, one file at a time. If it’s a Concepts file, it is simply added to the Gallery and opened. For a JPG or PNG, a new drawing is created and opened with the image.

On the Canvas

From the canvas, the Import menu is accessed through the Import button up in the status bar. Tap the image icon to display your import options.

1. Import – Import allows you to import a JPG or PNG onto the canvas. When you import the image, it will appear Selected. This allows you to move the image about, resize it etc. When you have it where you want it, tap to set it to the screen.

Images are assigned to a layer when imported. If your layers are set to Automatic, the app will create an “Image” layer just for the image at the bottom of the stack. If your layers are set to Manual, the image will import to your active layer.

2. Paste from Clipboard – This imports any supported selection or image currently copied onto your device’s clipboard. The content will paste to the active layer. Ctrl+C and Ctrl+V work when copy/pasting a selection, as well.

3. Take a Picture – This will use your device’s camera. It will add your image to the drawing following the Automatic / Manual layering modes explained above in number one.

Copying a Selection to the Clipboard

When you have strokes or an image Selected, the Selection menu shows a paperclip icon. Tap this icon to copy your Selected items onto your device’s clipboard. A note will appear saying, “Copied to Clipboard.”

You can access your Selection from another drawing via the Import menu on the canvas, or in the Gallery.

Copying from One Canvas to Another

The canvas allows us to use another canvas as the source of a bitmap drawing operation. Let’s take a quick look at how we might utilize this functionality.

We will need to modify the base file for this chapter and create an extra tag in our HTML. We will name this extra element canvas2 . (It can be given any ID as long as it is not the same ID as the first .) Here is what our HTML will look like now:

   id="canvas" width="256" height="256" style="position: absolute; top: 50px; left: 50px;">Your browser does not support HTML5 Canvas.  id="canvas2" width="32" height="32" style="position: absolute; top: 256px; left: 50px;">Your browser does not support HTML5 Canvas.  

We will place the second below the original and give it a width and height of 32 . We will also need to create a new context and internal reference variable for canvas2 . Here is the code that will be used to provide a reference to both elements:

if (!canvasSupport())  return; >else var theCanvas = document.getElementById("canvas"); var context = theCanvas.getContext("2d"); var theCanvas2 = document.getElementById("canvas2"); var context2 = theCanvas2.getContext("2d"); >

  lang="en">  charset="UTF-8"> CH4EX17: Canvas Copy 

script src="modernizr.js">/script> script type="text/javascript"> window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded()  canvasApp(); > function canvasSupport ()  return Modernizr.canvas; > function canvasApp() if (!canvasSupport())  return; >else var theCanvas = document.getElementById("canvas"); var context = theCanvas.getContext("2d"); var theCanvas2 = document.getElementById("canvas2"); var context2 = theCanvas2.getContext("2d"); > var tileSheet = new Image(); tileSheet.addEventListener('load', eventSheetLoaded , false); tileSheet.src="tanks_sheet.png"; function eventSheetLoaded()  startUp(); > function startUp() context.drawImage(tileSheet, 0, 0); context2.drawImage(theCanvas, 32, 0,32,32,0,0,32,32); > > /script>