Corel Painter Help : Creating, navigating, and manipulating documents : Rotating images and the canvas
How to draw an image on canvas without html
I’m trying to add a sprite to the canvas of my game. However, I don’t want to use an image tag. However, I haven’t found a way to do this no matter how hard I searched. Something like:
var image = 'sample.jpg' draw(image) Follow
asked Oct 12, 2016 at 23:19
The Gamer King The Gamer King
93 3 3 silver badges 13 13 bronze badges
$endgroup$
$begingroup$ You’ve consulted the docs for canvas.getContext(‘2d’).drawImage? $endgroup$
Oct 12, 2016 at 23:34
$begingroup$ Yes but that requires uploading the image using html, which as I said I was trying to avoid $endgroup$
Oct 12, 2016 at 23:40
$begingroup$ You can create a reference to an image element in your script without that tag ever being added to your HTML document. $endgroup$
Oct 12, 2016 at 23:43
$begingroup$ How? I don’t really know much JavaScript. $endgroup$
Oct 12, 2016 at 23:44
$begingroup$ It’s literally the first example in the docs here – just skip the “appendChild” step at the end. $endgroup$
Oct 12, 2016 at 23:45
2 Answers 2
Sorted by: Reset to default
$begingroup$
Philip’s suggested improvement to DMGregory’s answer is important.
//Create Image object var image2 = new Image(); //Get context ready var canvas2 = document.getElementById('mycanvasid'); var ctx2 = canvas2.getContext('2d'); //Now, set .onload with function(s) that require a loaded image, before setting .src image2.onload = function () < var x = 0, y = 0; ctx2.drawImage(image2, x, y); //aka, ctx2.drawImage(this, 0, 0); >//Finally, start the loading process image2.src = 'path/to/your/image.png'; Follow
answered Oct 19, 2016 at 7:28
Jose_X Jose_X
146 2 2 bronze badges
$endgroup$
$begingroup$
Recapping the doc examples discussed in the comments above:
// First, create a reference to the image we want to draw. var image = new Image(); // or document.createElement('img'); image.src = 'path/to/your/image.png'; // Next, find (or create/add) our canvas, and get its drawing context. var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Finally, draw our image onto the canvas with a given x & y position. var x = 0, y = 0; ctx.drawImage(image, x, y); Follow
answered Oct 13, 2016 at 0:53
DMGregory ♦ DMGregory
132k 22 22 gold badges 240 240 silver badges 350 350 bronze badges
$endgroup$
$begingroup$ You should do the ctx.drawImage call in the .onload handler of the image. Otherwise the image will very likely be drawn before it is loaded, resulting in drawing nothing at all. $endgroup$
| To rotate an image |
| 1 | From the toolbox, click the Rotate Page tool . |
| If you prefer using a keyboard shortcut, hold down Option + Spacebar (Mac OS) or Spacebar + Alt (Windows). |
| The cursor changes to a hand with a pointing finger . |
| 2 | Drag in the document window to rotate the image. |
| The new rotation angle appears on the property bar. |
Hold down Shift while rotating.
Type a rotation angle in the Rotation Angle box on the property bar or in the Navigator panel.
You can also rotate an image from the Navigator panel by typing a value in the Rotate canvas box or by opening the Rotate Canvas slider and adjusting the rotation.
| To reset the original orientation of an image |
| 1 | In the toolbox, click the Rotate Page tool . |
| 2 | Do one of the following: |
| • | Click once in the document window. |
| • | Double-click the Rotate Page tool . |
| • | On the property bar, click the Reset Tool button . |
You can also reset image rotation from the Navigator panel by clicking the Reset Rotation button .
| To rotate the canvas |
| 1 | Choose Canvas Rotate Canvas. |
| 2 | Perform a task from the following table. |
Choose Canvas Rotate Canvas 180.
Choose Canvas Rotate Canvas 90 CW.
Choose Canvas Rotate Canvas 90 CCW.
Choose Canvas Rotate Canvas Arbitrary, and type a value in the Angle box.
Was this page helpful? Send feedback. (Internet connection required.)
Copyright 2016 Corel Corporation. All rights reserved.
# Canvas background
In some use cases you would want a background image or color over the whole canvas. There is no built-in support for this, the way you can achieve this is by writing a custom plugin.
In the two example plugins underneath here you can see how you can draw a color or image to the canvas as background. This way of giving the chart a background is only necessary if you want to export the chart with that specific background. For normal use you can set the background more easily with CSS
config setup plugin
const config = type: 'doughnut', data: data, options: plugins: customCanvasBackgroundColor: color: 'lightGreen', > > >, plugins: [plugin], >;
const data = labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 >] >;
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update(). const plugin = id: 'customCanvasBackgroundColor', beforeDraw: (chart, args, options) => const ctx> = chart; ctx.save(); ctx.globalCompositeOperation = 'destination-over'; ctx.fillStyle = options.color || '#99ffff'; ctx.fillRect(0, 0, chart.width, chart.height); ctx.restore(); > >;
config setup plugin
const config = type: 'doughnut', data: data, plugins: [plugin], >;
const data = labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 >] >;
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update(). const image = new Image(); image.src = 'https://www.chartjs.org/img/chartjs-logo.svg'; const plugin = id: 'customCanvasBackgroundImage', beforeDraw: (chart) => if (image.complete) const ctx = chart.ctx; const top, left, width, height> = chart.chartArea; const x = left + width / 2 - image.width / 2; const y = top + height / 2 - image.height / 2; ctx.drawImage(image, x, y); > else image.onload = () => chart.draw(); > > >;
Last Updated: 8/24/2023, 12:34:45 PM
