Artist draw pattern backward

apps/src/turtle/turtle.js

@@ -228,6 +228,10 @@ class Visualization {
     this.turtleFrame_ = 0;
   }
 
+  clipImage() {
+
+  }
+
   // Helper for creating canvas elements.
   createCanvas_(id, width, height) {
     var el = document.createElement('canvas');
@@ -547,15 +551,24 @@ class Visualization {
       // Need to subtract 90 to accommodate difference in canvas vs. Turtle direction
       this.ctxScratch.rotate(this.degreesToRadians_(this.heading - 90));
 
-      if (img.width !== 0) {
-        this.ctxScratch.drawImage(img,
-          // Start point for clipping image
-          0, 0,
-          // clip region size
-          distance + img.height / 2, img.height,
-          // draw location relative to the ctx.translate point pre-rotation
-          -img.height / 4, -img.height / 2,
-          distance+img.height / 2, img.height);
+      if ((distance > 0) && (img.width !== 0)) {
+          this.ctxScratch.drawImage(img,
+            // Start point for clipping image forward
+            0, 0,
+            // clip region size
+            distance, img.height,
+            // draw location relative to the ctx.translate point pre-rotation
+            -img.height / 4, -img.height / 2,
+            distance+img.height / 2, img.height);
+      } else if ((distance < 0) && (img.width !== 0)) {
+            this.ctxScratch.drawImage(img,
+              // Start point for clipping image backward
+              img.width, 0,
+              // clip region size
+              distance, img.height,
+              // draw location relative to the ctx.translate point pre-rotation
+              -img.height / 4, -img.height / 2,
+              distance+img.height / 2, img.height);
       }
 
       this.ctxScratch.restore();
@@ -902,6 +915,7 @@ Artist.prototype.afterInject_ = function (config) {
   var visualization = document.getElementById('visualization');
   visualization.appendChild(this.visualization.displayCanvas);
 
+  // TODO (br-pair): - pull this out?
   if (this.studioApp_.isUsingBlockly() && this.isFrozenSkin()) {
     // Override colour_random to only generate random colors from within our frozen
     // palette
@@ -1510,7 +1524,7 @@ Artist.prototype.step = function (command, values, options) {
       result = this.calculateSmoothAnimate(options, distance);
       tupleDone = result.tupleDone;
       this.visualization.setHeading(heading);
-      this.visualization.jumpForward(result.distance);
+      this.jumpForward(result.distance);
       break;
     case 'RT':  // Right Turn
       distance = values[0];

apps/test/unit/turtle/turtleTest.js

@@ -1,3 +1,4 @@
+import sinon from 'sinon';
 import {expect} from '../../util/configuredChai';
 import {parseElement} from '@cdo/apps/xml';
 const Artist = require('@cdo/apps/turtle/turtle');
@@ -55,6 +56,40 @@ describe('Artist', () => {
     });
   });
 
+  describe('drawing with patterns', () => {
+    it('draws a pattern backwards', () => {
+      let artist = new Artist();
+      let width = 100;
+      let height = 100;
+      let img = new Image(width, height);
+
+      artist.visualization = new Artist.Visualization();
+      artist.visualization.currentPathPattern = img;
+      const setDrawPatternBackwardSpy = sinon.spy(artist.visualization.ctxScratch, 'drawImage');
+      artist.visualization.drawForwardLineWithPattern_(-100);
+
+      expect(setDrawPatternBackwardSpy).to.be.have.been.calledWith(img, 100, 0, -100, 100, -25, -50, -50, 100);
+
+      setDrawPatternBackwardSpy.restore();
+    });
+
+    it('draws a pattern forward', () => {
+      let artist = new Artist();
+      let width = 100;
+      let height = 100;
+      let img = new Image(width, height);
+
+      artist.visualization = new Artist.Visualization();
+      artist.visualization.currentPathPattern = img;
+      const setDrawPatternForwardSpy = sinon.spy(artist.visualization.ctxScratch, 'drawImage');
+      artist.visualization.drawForwardLineWithPattern_(100);
+
+      expect(setDrawPatternForwardSpy).to.be.have.been.calledWith(img, 0, 0, 100, 100, -25, -50, 150, 100);
+
+      setDrawPatternForwardSpy.restore();
+    });
+  });
+
   describe('jumpTo', () => {
     let artist;
     beforeEach(() => {