aboutsummaryrefslogtreecommitdiff
path: root/assets/canvas-runtime.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r--assets/canvas-runtime.js43
1 files changed, 39 insertions, 4 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index b5b08cea..524cdfeb 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -1958,6 +1958,40 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, {
1958 } 1958 }
1959 }, 1959 },
1960 1960
1961 //buildColor returns the fillStyle or strokeStyle for the Canvas 2D context
1962 buildColor: {
1963 value: function(ctx, //the 2D rendering context (for creating gradients if necessary)
1964 ipColor, //color string, also encodes whether there's a gradient and of what type
1965 w, //width of the region of color
1966 h, //height of the region of color
1967 lw) //linewidth (i.e. stroke width/size)
1968 {
1969 if (ipColor.gradientMode){
1970 var position, gradient, cs, inset; //vars used in gradient calculations
1971 inset = Math.ceil( lw ) - 0.5;
1972
1973 if(ipColor.gradientMode === "radial") {
1974 var ww = w - 2*lw, hh = h - 2*lw;
1975 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
1976 } else {
1977 gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
1978 }
1979 var colors = ipColor.color;
1980
1981 var len = colors.length;
1982 for(n=0; n<len; n++) {
1983 position = colors[n].position/100;
1984 cs = colors[n].value;
1985 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
1986 }
1987 return gradient;
1988 } else {
1989 var c = "rgba(" + 255*ipColor[0] + "," + 255*ipColor[1] + "," + 255*ipColor[2] + "," + ipColor[3] + ")";
1990 return c;
1991 }
1992 }
1993 },
1994
1961 render: { 1995 render: {
1962 value: function() { 1996 value: function() {
1963 // get the world 1997 // get the world
@@ -1974,18 +2008,19 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, {
1974 return; 2008 return;
1975 } 2009 }
1976 2010
2011 //vars used for the gradient computation in buildColor
2012 var w = world.getViewportWidth(), h = world.getViewportHeight();
2013
1977 ctx.save(); 2014 ctx.save();
1978 ctx.lineWidth = this._strokeWidth; 2015 ctx.lineWidth = this._strokeWidth;
1979 ctx.strokeStyle = "black"; 2016 ctx.strokeStyle = "black";
1980 if (this._strokeColor) { 2017 if (this._strokeColor) {
1981 var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")"; 2018 ctx.strokeStyle = this.buildColor(ctx, this._strokeColor, w,h, this._strokeWidth);
1982 ctx.strokeStyle = strokeColorStr;
1983 } 2019 }
1984 2020
1985 ctx.fillStyle = "white"; 2021 ctx.fillStyle = "white";
1986 if (this._fillColor){ 2022 if (this._fillColor){
1987 var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; 2023 ctx.fillStyle = this.buildColor(ctx, this._fillColor, w,h, this._strokeWidth);
1988 ctx.fillStyle = fillColorStr;
1989 } 2024 }
1990 var lineCap = ['butt','round','square']; 2025 var lineCap = ['butt','round','square'];
1991 ctx.lineCap = lineCap[1]; 2026 ctx.lineCap = lineCap[1];