Need some help porting this to pixi...

[agamemnus]

Not a lot of info on bezier curve stuff... have to hunt the code. And then I also need to add in a texture... Any advice from folks who did this before?

function canvas_draw_path (init) { var x           = init.x || 0 var y           = init.y || 0 var scale       = init.scale || 1 var data_string = init.data var canvas      = init.canvas  var data_array = get_data_array_from_string (data_string) draw_func (data_array, canvas)  function draw_func (data_array, canvas) {  var context = canvas.getContext('2d')   if (typeof init.lineWidth   != "undefined") context.lineWidth   = init.lineWidth  if (typeof init.strokeStyle != "undefined") context.strokeStyle = init.strokeStyle  if (typeof init.lineJoin    != "undefined") context.lineJoin    = init.lineJoin  if (typeof init.lineCap     != "undefined") context.lineCap     = init.lineCap   context.beginPath ()  context.translate (init.x * scale, init.y * scale)  for (var n = 0; n < data_array.length; n++) {   var c = data_array[n].command   var p = data_array[n].points   switch (c) {    case 'L' : context.lineTo (p[0], p[1]); break    case 'M' : context.moveTo (p[0], p[1]); break    case 'C' : context.bezierCurveTo (p[0], p[1], p[2], p[3], p[4], p[5]); break    case 'z' : context.closePath (); break   }  }  if ((typeof init.lineWidth == "undefined") || (init.lineWidth != 0)) context.stroke ()  if ((typeof init.fillPatternImage != "undefined") || (typeof init.fillStyle != "undefined")) {   if (typeof init.fillPatternImage != "undefined") {    var pattern = context.createPattern(init.fillPatternImage, 'no-repeat')    if (typeof init.fillPatternOffset != "undefined") {     context.save ()     context.translate (-init.fillPatternOffset[0] * scale, 0)     context.translate (0, -init.fillPatternOffset[1] * scale)    }    context.fillStyle = pattern   } else {    // fillStyle is subordinate to fillPatternImage.    context.fillStyle = init.fillStyle   }   context.fill ()  }  if (typeof init.fillPatternOffset != "undefined") context.restore () }  function get_data_array_from_string (data_string) {  // Command string.  var cs = data_string   // Command chars.  var cc = ['M', 'L', 'C']   // Convert white spaces to commas.  cs = cs.replace (new RegExp(' ', 'g'), ',')   // Create pipes so that we can split the data.  for (var n = 0; n < cc.length; n++) {cs = cs.replace (new RegExp(cc[n], 'g'), '|' + cc[n])}   // Create the array.  var arr = cs.split('|')  var ca = []   // Init the context point.  var cpx = 0, cpy = 0  for (n = 1; n < arr.length; n++) {   var str = arr[n]   var c = str.charAt(0)   str = str.slice(1)      // Remove ,- for consistency.   str = str.replace (new RegExp(',-', 'g'), '-')      // Add commas so that it's easy to split.   str = str.replace (new RegExp('-', 'g'), ',-')   str = str.replace (new RegExp('e,-', 'g'), 'e-')   var p = str.split(',')   if (p.length > 0 && p[0] === '') p.shift()      // Convert numbers in strings to floats.   for (var i = 0; i < p.length; i++) {p[i] = parseFloat(p[i]) * scale}      while (p.length > 0) {    if (isNaN(p[0])) break // Case for a trailing comma before next command.    var cmd = null    var points = []    var startX = cpx, startY = cpy    switch (c) {     case 'L' :      cpx = p.shift ()      cpy = p.shift ()      points.push (cpx, cpy)      break     case 'M' :      // Subsequent points are treated as absolute lineTo.      cpx = p.shift ()      cpy = p.shift ()      cmd = 'M'      points.push (cpx, cpy)      c = 'L'      break     case 'C' :      points.push (p.shift(), p.shift(), p.shift(), p.shift())      cpx = p.shift ()      cpy = p.shift ()      points.push (cpx, cpy)      break    }    ca.push ({     command : cmd || c,     points  : points,     start   : {x: startX, y: startY}    })   }   if ((c === 'z') || (c === 'Z')) ca.push ({command: 'z', points: [], start: undefined})  }  return ca }}

[agamemnus]

Actually, it's possible I don't need to. I think I will just need to create a multi-pass filter somehow. I think I saw a filter test page somewhere for pixi.js but I can't find it...