I have to create this sine wave inside a layer on an image I already have.

The image is 600 dpi, 10x10cm and I have a new layer created at the top that is selected.

The image is CMYK.

I have to run this javascript that creates a sine wave that is 20 px away for the four margins.

I have ever created a script for photoshop.

I am experimenting with this script that is a copy paste from several things I have found on the web.


app.displayDialogs = DialogModes.NO;  
var strtRulerUnits = app.preferences.rulerUnits;  
var strtTypeUnits = app.preferences.typeUnits;  
app.preferences.rulerUnits = Units.PIXELS;  
app.preferences.typeUnits = TypeUnits.PIXELS;  
var Colour = new SolidColor;  
Colour.rgb.hexValue = '000000';  

var document = app.documents.add();

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var divisions = 100;
var pi = 3.1415;
var step = pi/divisions;

var margin = 20;

var w = app.activeDocument.width.toString().replace(' px', '');
var h = app.activeDocument.height.toString().replace(' px', '');

w = parseInt(w);
h = parseInt(h);

var marginX = 20;
var marginY = 20;

var amplitude = h-2*marginY;

var fn = "Math.sin(x)*amplitude";

for (var positionX = 0; positionX < pi; step++)
   makeSine (positionX+marginX, amplitude);

function makeSine(positionX, amplitude)

var y = eval(fn);

This creates a new image completely blank because I need a magic function to put where it is written... "HERE COMES THE MAGIC FUNCTION"... 😃

Thanks for any help

  • 1
    You’re mixing up html canvas element and photoshop javascript, please check within photoshop scripting references to see what Photoshop has to offer. Oct 20, 2018 at 20:52
  • You don't need a Script to create a sine wave in Photoshop. You can draw a straight line, then apply a sine wave distortion to it using the Wave Filter.
    – Billy Kerr
    Oct 21, 2018 at 10:27
  • @BillyKerr but then your not having a path ;)
    – joojaa
    Oct 21, 2018 at 12:33
  • There is no querySelector('canvas') in photoshop documents that only works for web stuff. Its javascript but with different API (API is not javascript, just the interface web browsers give you)
    – joojaa
    Oct 21, 2018 at 12:57
  • You are not yet ready to copy and paste because unfortunately, one cannot copy oranges and paste them expecting them to be apples. Your answers lie in the archives that comprise the entirety of the Photoshop Scripting Forum! Dive right in and before you know it, you'll be sine-waving like a pro! forums.adobe.com/community/photoshop/photoshop_scripting
    – Silly-V
    Oct 22, 2018 at 20:47

1 Answer 1


If you need a path, you can use an approximated formula from this answer: https://stackoverflow.com/a/29214613/3833874 and build points using PathItem object of Photoshop.

Here's a quick test: pale blue is an actual sin, grey is a path I made using the formula from above:

enter image description here

  • Ok, thanks, but I don't know how to plot that on the "canvas". Thanks.
    – Duck
    Oct 22, 2018 at 20:22
  • 1
    Because as some people and me mentioned in the comments to your original question, document.querySelector is a HTML element, Photoshop doesn't have this function. Oct 22, 2018 at 20:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.