We Keep Coding

HTML5 canvas translate back after scale and rotation - javascript

I'm trying to do a few thing with canvas. First I have a user upload an image, if the image is larger than I want I need to scale it down. That part is working just fine. Recently we ran into an issue with iPhone users uploading images. These have orientation issues. I've figured out how to get the orientation extracted, my issue is what happens when I manipulate the image in the canvas.
This is what I need to do: Get the image, translate(), scale(), rotate(), translate() <- get it back to its original position, drawImage().
When I do that part of the image is off in the abyss.
if (dimensions[0] > 480 || dimensions[1] > 853) {
// Scale the image.
var horizontal = width > height;
if (horizontal) {
scaledHeight = 480;
scaleRatio = scaledHeight / height;
scaledWidth = width * scaleRatio;
} else {
scaledWidth = 640;
scaleRatio = scaledWidth / width;
scaledHeight = height * scaleRatio;
}
canvas['width'] = scaledWidth;
canvas['height'] = scaledHeight;
ctx['drawImage'](image, 0, 0, width, height, 0, 0, scaledWidth, scaledHeight);
/* Rotate Image */
orientation = 8; //manual orientation -> on the site we use loadImage to get the orientation
if(orientation != 1){
switch(orientation){
case 8:
case 6:
canvas.width = scaledHeight;
canvas.height = scaledWidth;
break;
}
var halfScaledWidth = scaledWidth/2;
var halfScaledheight = scaledHeight/2;
ctx.save(); //<- SAVE
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(halfScaledWidth,halfScaledheight);
switch(orientation){
case 8: //rotate left
ctx.scale(scaleRatio,scaleRatio);
ctx.rotate(-90*Math.PI/180);
ctx.translate(-1380,-1055); // <-Manuial numbers
break;
case 3: //Flip upside down
ctx.scale(scaleRatio,scaleRatio);
ctx.rotate(180*Math.PI/180);
ctx.translate(-925,-595); //<-Manuial numbers
break;
case 6: //rotate right
ctx.scale(scaleRatio,scaleRatio);
ctx.rotate(90*Math.PI/180);
ctx.translate(-462,-130); //<-Manuial numbers
break;
}
//re-translate and draw image
//ctx.translate(-halfScaledWidth,-halfScaledheight);
ctx.drawImage(image,-halfScaledWidth, -halfScaledheight);
ctx.restore(); //<- RESTORE
}
/* Rotate Image */
}
I have orientation set manually so I can see how it looks in each position Im worried about. If its a portrait orientation I flip the canvas.
I've tried save() and restore(). I've tried translate(x,y) then translate(-x,-y).. My guess is that because of the scale the grid is off and x and y need to be multiplied. I tried doing that against the scaleRatio and still didn't work.
As you can see I manually set the translate back but that only works with the image size I am working with, so not a good solution at all!
Here is the code:
JSFiddle If I do a normal rotate right it all works.
Thanks!

Transformations
For the easy answer if you are not interested in the how skip to the bottom where you will find an alternative approch to your problem. It is all commented. I have made a bit of a guess as to what you wanted.
If you are interested in what I consider a simpler way to use the 2D transformation functions read the rest.
Matrix Math
When you use translate, scale, and rotate via the canvas 2D API what you are doing is multiplying the existing matrix with one created with each function.
Basically when you do
ctx.rotate(Math.PI); // rotate 180 deg
the API creates a new rotation matrix and multiplies the existing matrix with it.
Unlike normal math multiplication matrix multiplication will change the result depending on what order you multiply. In normal math multiplication A * B = B * A but this does not hold true for matrices mA * mB != mB * mA (Note the not equals)
This becomes more problematic when you need to apply several different transformations.
ctx.scale(2,2);
ctx.rotate(Math.PI/2);
ctx.translate(100,100);
Does not give the same result as
ctx.scale(2,2);
ctx.translate(100,100);
ctx.rotate(Math.PI/2);
The order that you need to apply the tranforms depends on what you are trying to achieve. Using the API this way is very handy for complex linked animations. Unfortunately it is also a source of endless frustration if you are not aware of matrix math. It also forces many to use the save and restore functions to restore the default transformation, that in some situations can be very costly in GPU performance.
setTransform()
We are in luck though as the 2D API also has the function ctx.setTransform(a, b, c, d, e, f) which is all you really should ever need. This function replaces the existing transform with the one supplied. Most of the documentation is rather vague as to the meaning of the a,b,c,d,e,f but contained in them is the rotation, scale, and translation.
One handy use of the function is to set the default transform rather than use save and restore.
I see this type of thing a lot. (The Example 1, referenced further down)
// transform for image 1
ctx.save(); // save state
ctx.scale(2,2);
ctx.rotate(Math.PI/2);
ctx.translate(100,100);
// draw the image
ctx.drawImage(img1, -img1.width / 2, -img1.height / 2);
ctx.restore(); // restore saved state
// transform for image 2
ctx.save(); // save state agian
ctx.scale(1,1);
ctx.rotate(Math.PI);
ctx.translate(100,100);
// draw the image
ctx.drawImage(img2, -img2.width / 2, -img2.height / 2);
ctx.restore(); // restore saved state
An easier way is to just drop the save and restores and reset the transform manually by setting it to the Identity matrix
ctx.scale(2,2);
ctx.rotate(Math.PI/2);
ctx.translate(100,100);
// draw the image
ctx.drawImage(img1, -img1.width / 2, -img1.height / 2);
ctx.setTransform(1,0,0,1,0,0); // restore default transform
// transform for image 2
ctx.scale(1,1);
ctx.rotate(Math.PI);
ctx.translate(100,100);
// draw the image
ctx.drawImage(img2, -img2.width / 2, -img2.height / 2);
ctx.setTransform(1,0,0,1,0,0); // restore default transform
Now then I am sure you are still wondering what are these numbers being passed to setTransform and what do they mean?
The easiest way to remember them is as 2 vectors and 1 coordinate. The two vectors describe the direction and scale of a single pixel, the coordinate is simply the x,y pixel location of the origin (the location that drawing at 0,0 will be on the canvas).
A Pixel and its axis
Imagine a single pixel, this is the abstract transformed pixel that can be scaled and rotated by the current transformation. It has two axis, X and Y. To describe each axis we need two numbers ( a vector) these describes the screen (untransformed) direction and scale of the top and left side of the pixel. So for a normal pixel that matches the screen pixels the X axis is across the top from left to right and is one pixel long. The vector is (1,0) one pixel across, no pixels down. For the Y axis that goes down the screen the vector is (0,1) no pixels across, one pixel down. The origin is the top right screen pixel which is at coordinate (0,0).
Thus we get the Identity Matrix, the default matrix for the 2D API (and many other APIs) The X axis (1,0), Y axis (0,1) and the origin (0,0) which match the six arguments for setTransform(1,0,0,1,0,0).
Now say we want to scale the pixel up. All we do is increase the size of the X and Y Axis setTransform(2,0,0,2,0,0) is the same as scale(2,2) (from the default transform) Our pixel's top is now two pixels long across the top and two pixels long down the left side. To scale down setTransform(0.5,0,0,0.5,0,0) our pixel is now half a pixel across and down.
These two axis vectors (a,b) & (c,d) can point in any direction, are completely independent of each other , they don't have to be at 90 deg to each other so can skew the pixel, nor do they require that they be the same length so you can change the pixel aspect. The origin is also independent and is just the canvas absolute coordinates in pixels of the origin and can be set to anywhere on or off the canvas.
Now say we want to rotate the transform 90Deg clockwise, scale up both axes by 2 and position the origin at the center of the canvas. We want the X axis (top) of our pixel to be 2 pixels long and pointing down the screen. The vector is (0,2) 0 across and two down. We want the left side of our pixel to 2 long and point to the left of the screen (-2,0) Negative two across and none down. And the origin at the center is (canvas.width / 2, canvas.height / 2) to get the final matrix that is setTransform(0,2,-2,0,canvas.width / 2, canvas.height / 2)
Rotate the other way is setTransform(0,-2,2,0,canvas.width / 2, canvas.height / 2)
Easy Rotate 90deg
You may notice that rotating 90 degrees is just swapping the vectors and changing a sign.
The vector (x,y) rotated 90 degrees clockwise is (-y,x).
The vector (x,y) rotated 90 degrees anti-clockwise is (y,-x).
Swap the x, and y and negate the y for clockwise or negate the x for the anticlockwise rotation.
For 180 it is starting at 0 deg vector (1,0)
// input vector
var x = 1;
var y = 0;
// rotated vector
var rx90 = -y; // swap y to x and make it negative
var ry90 = x; // x to y as is
// rotate again same thing
var rx180 = -ry90;
var rx180 = rx90;
// Now for 270
var rx270 = -ry180; // swap y to x and make it negative
var rx270 = rx180;
Or all in terms of just x and y
0 deg (x,y)
90deg (-y,x)
180deg (-x,-y)
270deg (y,-x)
and back to 360 (x,y).
This is a very handy attribute of a vector that we can exploit to simplify the creation of our transformation matrix. In most situations we do not want to skew our image thus we know that the Y axis is always 90Deg clockwise from the x axis. Now we only need to describe the x axis and by applying the 90deg rotation to that vector we have the y axis.
So the vars x and y are the scale and direction of the top of our pixel (x axis), ox, oy are the location of the origin on the canvas (translation) .
var x = 1; // one pixel across
var y = 0; // none down
var ox = canvas.width / 2; // center of canvas
var oy = canvas.height / 2;
Now to create the transform is
ctx.setTransform(x, y, -y, x, ox, oy);
Note that the y axis is at 90 degs to the x axis.
Trig and the Unit vector
All well and easy when the axis are aligned to the top and sides, how do you get the vector for a axis at an arbitrary angle such as is supplied by the argument for ctx.rotate(angle) For that we need a tiny bit of trig. The Math function Math.cos(angle) returns the x component of the angle, angle and Math.sin(angle) gives us the Y component. For zero deg cos(0) = 1 and sin(0) = 0 for 90 deg (Math.PI/2 radians) cos(PI/2) = 0 and sin(PI/2) = 1.
The beauty of using sin and cos is that the two numbers that we get for our vector always give us a vector that is 1 unit (pixel) long (this is called a normalised vector or a unit vector) thus cos(a)2 + sin(a)2 = 1
Why does this matter? because it makes scaling very easy. Assuming that we always keep the aspect square we only need one number for the scale. To scale a vector you simply multiply it by the scale
var scale = 2; // scale of 2
var ang = Math.random() * 100; // any random angle
var x = Math.cos(ang); // get the x axis as a unit vector.
var y = Math.sin(ang);
// scale the axis
x *= scale;
y *= scale;
the vector x,y is now two units long.
Better than using save, restore, rotate, scale, translate... :(
Now put it all together to create a matrix with an arbitrary rotation, scale and translation (origin)
// ctx is the 2D context,
// originX, and originY is the origin, same as ctx.translate(originX,originY)
// rotation is the angle in radians same as ctx.rotate(rotation)
// scale is the scale of x and y axis same as ctx.scale(scale,scale)
function createTransform(ctx,originX,originY,rotation,scale){
var x, y;
x = Math.cos(rotation) * scale;
y = Math.sin(rotation) * scale;
ctx.setTransform(x, y, -y, x, originX, originY);
}
Now to apply that to the example (1) given above
// dont need ctx.save(); // save state
// dont need ctx.scale(2,2);
// dont need ctx.rotate(Math.PI/2);
// dont need ctx.translate(100,100);
createMatrix(ctx, 100, 100, Math.PI/2, 2)
// draw the image normally
ctx.drawImage(img1, -img1.width / 2, -img1.height / 2);
// dont need ctx.restore(); // restore saved state
// transform for image 2
// dont need ctx.save(); // save state agian
// dont need ctx.scale(1,1);
// dont need ctx.rotate(Math.PI);
// dont need ctx.translate(100,100);
// we don't have to reset the default transform because
// ctx.setTransform completely replaces the current transform
createMatrix(ctx, 100, 100, Math.PI/2, 2)
// draw the image
ctx.drawImage(img2, -img2.width / 2, -img2.height / 2);
// dont need ctx.restore(); // restore saved state
And that is how you use setTransform to simplify transforming the canvas, rather than guessing, trial and error, scale, rotates, and translates back and forth within a sea of save and restores.
Using that to simplify your code
The answer
And now to your question
I am not entirely sure what you are after, I presume you a dont mind scaling the canvas to accommodate the image, that the image is always in the center and that the aspect remains the same. As the rotations are aligned to the screen I will set the transforms manualy
// this is in set up code
const MAX_SIZE_WIDTH = 640;
const MAX_SIZE_HEIGHT = 480;
orientationData = [];
orientationData[6] = Math.PI/2; // xAxis pointing down
orientationData[8] = -Math.PI/2; // xAxis pointing up
orientationData[3] = Math.PI; //xAxis pointing to left
// in your code
var orient,w,h,iw,ih,scale,ax,ay; // w and h are canvas size
// assume image is the loaded image
iw = image.width; // get the image width and height so I dont have to type as much.
ih = image.height;
if(orientation != 1){
var orient = orientationData[orientation];
if(orient === undefined){
return; // bad data so return
}
// get scale and resize canvas to suit
// is the image on the side
if(orientation === 6 || orientation === 8){
// on side so swap width and height
// get the height and width scales for the image, dont scale
// if the image is smaller than the dimension
scale = Math.min(1,
MAX_SIZE_WIDTH / ih,
MAX_SIZE_HEIGHT / iw
);
w = canvas.width = scale * ih;
h = canvas.height = scale * iw;
}else{
// for normal orientation
scale = Math.min(1,
MAX_SIZE_WIDTH / iw,
MAX_SIZE_HEIGHT / ih
);
h = canvas.height = scale * ih;
w = canvas.width = scale * iw;
}
// Do you really need to clear the canvas if the image is filling it??
// ensure that the default transform is set
ctx.setTransform(1, 0, 0, 1, 0, 0);
// clear the canvas
ctx.clearRect(0, 0, w, h);
// now create the transformation matrix to
// position the image in the center of the screen
// first get the xAxis and scale it
ax = Math.cos(orient) * scale;
ay = Math.sin(orient) * scale;
// now set the transform, the origin is always the canvas center
// and the Y axis is 90 deg clockwise from the xAxis and same scale
ctx.setTransform(ax, ay, -ay, ax, w / 2, h / 2);
// now draw the image offset by half its width and height
// so that it is centered on the canvas
ctx.drawImage(image,-iw / 2, -ih / 2);
// restore the default transform
ctx.setTransform(1, 0, 0, 1, 0, 0);
} // done.

Try this one https://jsfiddle.net/uLdf4paL/2/. Your code is correct, but you have to change orientation variable when you try to rotate and scale image (if it is what you wanna get).

My solution for this was using two canvases
one for the rotation and scaling (around the center point of the image)
then using a new canvas for translating and drawing the prev canvas on it. it worked perfectly for me:
const root = document.querySelector("#root");
const img = document.querySelector('#img');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext("2d");
const tempCanv = document.createElement('canvas')
const tempCtx = tempCanv.getContext('2d');
canvas.height = img.height
canvas.width = img.width
tempCanv.width = img.width
tempCanv.height = img.height
const position = [0.25, 0.25];
const rotation = -40;
const scale = [37.222, 37.222];
const x = img.width / 2;
const y = img.height / 2;
// Set the origin to the center
tempCtx.translate(x, y);
// now rotate and scale around the center
tempCtx.rotate(Math.PI / 180 * rotation);
tempCtx.scale(scale[0] / 100, scale[1] / 100);
// Translate back to origin
tempCtx.translate(-x, -y);
// Draw temp
tempCtx.drawImage(img,0,0);
// Translate the final canvas
ctx.translate(position[0] * canvas.width, position[1] * canvas.height);
ctx.drawImage(tempCanv, 0, 0);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#root{
display: flex;
gap: 2rem;
padding: 1rem;
overflow:visible
position relative;
}
.image-container{
}
#img{
transform: rotate(-40deg) scale(0.37222, 0.37222);
top: 25%;
left: 25%;
position: relative;
}
</style>
</head>
<body>
<div id="root">
<div class="image-container">
<img id="img" src="https://media.istockphoto.com/photos/cat-world-picture-id1311993425?b=1&k=20&m=1311993425&s=170667a&w=0&h=vFvrS09vrSeKH_u2XZVmjuKeFiIEjTkwr9KQdyOfqvg=" alt="red">
</div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>

Related

I have an instance of HTML 5 canvas and a rectangle drawn on it.
My drawing function takes a resizing angle into account and uses relative coordinates.
Relative coordinates're based upon three variables: top left rectangle point, rectangle width and rectangle height.
Rectangle width and rectangle height're calculated using two points: top left rectangle point and bottom right rectangle point.
To sum up, drawing function depends on top left rectangle point, bottom right rectangle point and rotation. It's an important point for the following text!
Here's a code snippet:
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var xTopLeft = 550;
var yTopLeft = 200;
var xBottomRight = 750;
var yBottomRight = 450;
var w = Math.max(xTopLeft, xBottomRight) - Math.min(xTopLeft, xBottomRight);
var h = Math.max(yTopLeft, yBottomRight) - Math.min(yTopLeft, yBottomRight);
var r = 1;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save()
ctx.translate(xTopLeft + w / 2, yTopLeft + h / 2);
ctx.rotate(r);
ctx.fillStyle = "yellow";
ctx.fillRect(w / 2 * (-1), h / 2 * (-1), w, h);
ctx.restore()
}
Here's my rectangle with a bunch of controls: eight resizing handles (white) and one rotation handle (green):
Rotating works fine.
Resizing works fine.
And I also try to implement resizing after rotation. Here's my approach with a humble illustration:
Grab the coordinates of the red point (it's mouse cursor coordiantes)
Derotate the point using negative angle to get derotated coordinates
function rotatePoint(x, y, center_x, center_y, angle) {
var new_x = (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx;
var new_y = (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy;
return [new_x, new_y]
}
Update xTopLeft, yTopLeft and redraw
Done
The idea behind this approach is simple. Since my drawing function depeneds on top left rectangle point and bottom right rectangle point I just need to get their new coordinates.
For instance, here's a simplified code for B point:
if (point == 'B') {
var newPointB = rotatePoint(mouse.x, mouse.y, center_x, center_y, -r);
xBottomRight = newPointB[0];
yTopLeft = newPointB[1];
}
But it doesn't work as expected: while resizing my rotated rectangle shifts, jumps and totally misbehaves.
In search of insights I've stumbled upon this article. The article covers my problem, but I don't get author's approach and can't implement it.
Why should I always lock the coordinates of the A point? My top left handle is intended to resize the rectangle in a north-west direction, so it would be necessary to change the coordinates of the A point...
Why should we recalculate the center point before derotation? It breaks the idea of uniform matrix transformations...
What's the correct algorithm in my case?

I was also facing same problem. It turned out that the angle I was using was in degree. Try multiplying angle in rotatePoint function with (Math.PI / 180).

Let's say we're dynamically drawing a fractal on a canvas. Since we don't know how big the fractal is going to be, at some point we'd need to scale (zoom out) the canvas to fit our fractal in there.
How do we do that? How to scale it:
Properly, so that it perfectly fits the drawing we have, and
So that the coordinates stay the same, and our fractal calculation doesn't need to use the scale value (meaning, return x, not return x * scale, if possible)
What if the fractal grows in all directions and we have negative values?
See the tiny example below.
var $canvas = document.querySelector('canvas'),
ctx = $canvas.getContext('2d'),
lastX = 0,
lastY = 0;
drawLoop();
function drawLoop() {
var newX = lastX + 30,
newY = lastY + 30;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(newX, newY);
ctx.stroke();
lastX = newX;
lastY = newY;
setTimeout(drawLoop, 1000);
}
<canvas width="100" height="100" style="border: 1px solid #ccc;"></canvas>

You can scale, translate, and rotate the drawing coordinates via the canvas transform.
If you have the min and max coordinates of your drawing
Example:
const min = {x: 100, y: 200};
const max = {x: 10009, y: 10000};
You can make it fit the canvas as follows
const width = canvas.width;
const height = canvas.height;
// get a scale to best fit the canvas
const scale = Math.min(width / (max.x - min.x), height / (max.y - min.y));
// get a origin so that the drawing is centered on the canvas
const top = (height - (max.y - min.y)) / 2;
const left = (width - (max.x - min.x)) / 2;
// set the transform so that you can draw to the canvas
ctx.setTransform(scale, 0, 0, scale, left, top);
// draw something
ctx.strokeRect(min.x, min.y, max.x - min.x, max.y - min.y);
If you do not know the size of the drawing area at the start then you will need to save drawing coordinates as you go. When the min and max change you then recalculate the transform, clear the canvas and redraw. There is no other way if you do not know the size at the beginning.

I have some code in my game that rotates an icon within its canvas as follows:
if (rotate > 0) {
context.translate(canvasWidth / 2, canvasHeight / 2);
context.rotate(rotate);
context.translate(-canvasWidth / 2, -canvasHeight / 2);
}
Nothing you haven't seen before. I've also added a function that tiles the icons within a larger canvas like so:
var x = 0;
var y = 0;
for (var i = 0; i < totalUnits; i++) {
context.drawImage(img, x, y);
if (i != 0 && (i + 1) % level == 0) {
x = 0;
y += 72;
}
else {
x += 72;
}
}
Note that the variable level can be any integer, and totalUnits is its square if it's greater than 1, so for example if I specify level as 2, then 4 images are drawn on my canvas, 2 across and 2 down. Note also that my images are always 72x72 pixels, hence the 72 above. Again, nothing particularly exciting.
My difficulty is trying to rotate the images within the canvas such that the individual image is rotated by the value passed in rotate, but not the whole canvas itself. I have tried adding the following code with many permutations replacing the above call to context.drawImage in the for loop, with no luck so far:
context.translate(72 / 2, 72 / 2);
context.rotate(rotate);
context.drawImage(img, x, y);
context.rotate(0);
context.translate(-72 / 2, -72 / 2);
To help visualise the effect I am trying to achieve, here is what is drawn when rotate is set to 0:
And here is what I'd like my tiled images on the canvas to look like when rotated by 45 degrees (for example):
I'd like to point out that I am not trying to rotate the entire canvas - I know how to do that, but it is not the effect I'm trying to achieve as I need the icons to stay in their individual x, y positions. Also, rotating the entire canvas presents cutoff corner challenges.
Any help would be much appreciated!

Easiest way is to overwrite the current transform
ctx.setTransform(scale, 0, 0, scale, x, y);
ctx.rotate(rotate);
ctx.drawImage(img, -img.width / 2, -img.height/ 2);
Draw image center at x, y, rotated by rotate around img center, and scales by scale. Scale of 1 is no scale.
To reset to default transform for example before clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
Because under the hood the ctx.rotate requires at least 1 sin and 1 cos, 12 temp numbers, then 12 multiplications and 8 additions. If the scaling is uniform (same scale for x and y), it is quicker to use a simplified method to creating the matrix. Note if the scale is always 1 you don't need the scale`
Also when the image loads you can set the point of rotation as properties of the image.
When the image loads set the offset
img.offset_x = - img.naturalWidth / 2; // NOTE I use snake_case for the property names
img.offset_y = - img.naturalHeight / 2; // so that the names will never clash with
// future changes to the standard
To render that image
const ax = Math.cos(rotate) * scale;
const ay = Math.sin(rotate) * scale;
ctx.setTranform(ax, ay, -ay, ax, x, y);
ctx.drawImage(img, img.offset_x, img.offset_y);

For instance, say I have the following path.
<canvas id="main" width="500" height="250"></canvas>
var canvas = document.getElementById("main");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.arcTo(150,20,150,70,50);
ctx.lineTo(150,120);
ctx.lineWidth = 3;
ctx.stroke();
Is it possible to draw images on the arc of the line? If so, How?

Slice an image to draw on curves.
Yes it is possible, though ideally this would be a job for WebGL. The next best solution is a scan line render but that is way to much CPU load for poor Javascript to manage.
The next best I mean "OK sort of." option is a little image slicing.
You simply draw the image in thin slices around the arc. The 2D renderer is not perfect and tries to draw half pixels as best it can. The result is some noise along the edge of each slice where you can see through. To overcome this I draw each slice slightly wider to cover up any holes.
If you need high quality, rendering it all at double the size on an offscreen canvas and then scale down to a onscreen canvas (don't forget smoothing) will make most think it was drawn that way.
As the inner and outer edges of the arc have different circumferences some of the image must be squashed or stretched. In the demo I keep the inner edge of the image to the correct width and stretch the outer edge. It is easy to change but ensure that you use the outer edge to workout how many slices to draw.
WARNING the radius given is for the inner edge. It is vetted to stop the for loop getting too long and blocking the page. You may want to limit the radius so the inner circumference is the same as the image width. radius = radius < img.width / (Math.PI * 2) ? img.width / (Math.PI * 2) : radius;
It is easy to adapt to lines and curves. All you need is the tangent or curve normal (should be unit vector ie length 1) Use this vector to set the transform ctx.setTransform(nx,ny,tx,ty,px,py). THe first two values point out from the bottom of the image to the top, the next two numbers are along the tangent from left to right. The last two are the point on the curve to draw the slice.
// creates a blank image with 2d context
var createImage=function(w,h){var i=document.createElement("canvas");i.width=w;i.height=h;i.ctx=i.getContext("2d");return i;}
// create a canvas and add to dom
var can = createImage(512,512);
document.body.appendChild(can);
var ctx = can.ctx;
// create a image (canvas) to draw on the arc.
const textToDisplay = "<<Image on arc>>"
ctx.font = "64px arial";
var w = ctx.measureText(textToDisplay).width + 8;
var text = createImage(w + 64,84);
text.ctx.fillStyle = "#F90";
text.ctx.strokeStyle = "black";
text.ctx.lineWidth = 16;
text.ctx.fillRect(0,0,text.width,text.height);
text.ctx.strokeRect(0,0,text.width,text.height);
text.ctx.font = "64px arial";
text.ctx.fillStyle = "#0F0";
text.ctx.strokeStyle = "Black";
text.ctx.lineWidth = 4;
text.ctx.strokeText(textToDisplay,38,58);
text.ctx.fillText(textToDisplay,38,58);
// draws image on arc
// img image to render
// x,y center of arc
// radius the inner edge (bottom of image) radius
// fromAng The angle to start drawing the image in radians
// toAng (optional if not given image width will be used to get toAng)
// returns undefined
function drawArcImage(img,x,y,radius,fromAng,toAng){
// WARNING if you let the radius get to small the ratio between the inner and out circumference
// gets very large. This will result in the image being stretched over a quintabazzilon pixels.
// so must vet the radius or you will block the page and upset the browser gods.
radius = Math.abs(radius); // only positive
radius = radius < img.height / 8 ? img.height / 8 : radius;
var outRad = radius + img.height;
var cir = Math.PI * 2 * radius; // get inner circumference
if(toAng === undefined){
var toAng = (img.width / cir) * Math.PI * 2 ; // get the angle the image will cover
}
var cirOut = toAng * outRad; // get the out edge distance in pixels
var imgStep = img.width / cirOut; // the image step per slice
var imgX = 0; // track the image line to draw
var angStep = toAng / cirOut; // the angle steps
// For each pixel on the out edge draw a slice
for(var i = 0; i < toAng; i += angStep){
var dx = Math.cos(fromAng + i);
var dy = Math.sin(fromAng + i);
// set up the transform to draw a slice from the inner to outer edges
ctx.setTransform(dy,-dx,-dx,-dy,dx * radius + x,dy * radius + y);
// get and draw the slice. I stretch it a little (2pix) to cover imperfect rendering
ctx.drawImage(img,imgX,0,imgStep,img.height,-1,-img.height,2,img.height);
// move to next slice
imgX += imgStep;
}
ctx.setTransform(1,0,0,1,0,0); // reset the transform
}
// animate the image to prove it is real.. LOL
var animTick = 0;
var animRate = 0.01;
var pos = 0;
// update function call via RAF
function update(){
animTick += animRate; // update tick
// random anim sin waves.
var rad = Math.sin(animTick) * (256-text.height - 20) + 20;
pos += Math.sin(animTick*10) * 0.02;
pos += Math.sin(animTick/ 3) * 0.02;
pos += Math.sin(animTick/ 7) * 0.05;
// clear
ctx.clearRect(0,0,can.width,can.height)
// draw
drawArcImage(text,256,256,rad,pos)
// do again and again and again
requestAnimationFrame(update);
}
update();

This is an answer to a similar question:
You could, in the draw loop implement a "line drawing algorithm" that does not exactly draw a line but draws an item at a place where that point would be. Except, replace the line algorithm here to draw an arc instead.
function line(x0, y0, x1, y1){
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx-dy;
while(true){ // put draw loop here.
drawImage(image,x0,y0);//setPixel(x0,y0); // Do what you need to for this
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2 >-dy){ err -= dy; x0 += sx; }
if (e2 < dx){ err += dx; y0 += sy; }
}
}
code taken from: Bresenham algorithm in Javascript
I would suggest using a library like p5.js to do something like this. http://p5js.org

Is it possible to make an object orbit around another object that goes from behind and then to the front?
I've seen it being done with rotation animations that do a full 360 around the perimeter, but was wondering if it was possible to do it at an angle.
I couldn't find any resources that could do this, so I've included an image example of what I want to accomplish. The red line would be an object orbiting the blue circle.
Thanks so much - I really appreciate the help!

I figured I'd just write up a solution using the <canvas>
var x, y, scale, state, // Variables we'll use later.
canvas = document.getElementById("canvas"), // Get the canvas,
ctx = canvas.getContext("2d"), // And it's context.
counter = 0, // Counter to increment for the sin / cos functions.
width = 350, // Canvas width.
height = 200, // Canvas height.
centerX = width / 2, // X-axis center position.
centerY = height / 2, // Y-axis center position.
orbit = { // Settings for the orbiting planet:
width: 150, // Orbit width,
height: 50, // Orbit height,
size: 10 // Orbiting planet's size.
};
canvas.width = width; // Set the width and height of the canvas.
canvas.height = height;
function update(){
state = counter / 75; // Decrease the speed of the planet for a nice smooth animation.
x = centerX + Math.sin(state) * orbit.width; // Orbiting planet x position.
y = centerY + Math.cos(state) * orbit.height; // Orbiting planet y position.
scale = (Math.cos(state) + 2) * orbit.size; // Orbiting planet size.
ctx.clearRect(0, 0, width, height); // Clear the canvas
// If the orbiting planet is before the center one, draw the center one first.
(y > centerY) && drawPlanet();
drawPlanet("#f00", x, y, scale); // Draw the orbiting planet.
(y <= centerY) && drawPlanet();
counter++;
}
// Draw a planet. Without parameters, this will draw a black planet at the center.
function drawPlanet(color, x, y, size){
ctx.fillStyle = color || "#000";
ctx.beginPath();
ctx.arc(x || centerX,
y || centerY,
size || 50,
0,
Math.PI * 2);
ctx.fill();
}
// Execute `update` every 10 ms.
setInterval(update, 10);
<canvas id="canvas"></canvas>
If you want to change the roation direction of the orbiting planet, just replace:
x = centerX + Math.sin(state) * orbit.width;
y = centerY + Math.cos(state) * orbit.height;
With:
x = centerX + Math.cos(state) * orbit.width;
y = centerY + Math.sin(state) * orbit.height;
// ^ Those got switched.
The speed of the orbit can be changed by modifying the 75 in:
state = counter / 75;