=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js' --- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-08-22 19:41:35 +0000 +++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-08-24 18:14:50 +0000 @@ -165,18 +165,17 @@ // force alpha to 100% opaque this.pixData[3] = 0xFF; - // force the line width default - this.ctx.lineWidth = 1; - // eliminate anti-aliasing of images this.ctx.imageSmoothingEnabled = false; - // the current window stroke style - this.strokeStyle = strokesManager.getDefaultStrokeStyle(); - + // the current window stroke style id + this.strokeStyleId = strokesManager.getDefaultStrokeStyle(); // the current window stroke width this.strokeWidth = 1; + //sets the default stroke for the canvas + strokesManager.applyStrokeToCanvas(this.ctx, this.strokeStyleId, this.strokeWidth); + this.origin = { "x" : 0, "y" : 0 }; // force all drawing to be inside pixel "cells" instead of "stradling" between two cells @@ -468,9 +467,10 @@ { var cur = { - lineWidth : this.ctx.lineWidth, - fillstyle : this.ctx.fillStyle, - strokeStyle : this.ctx.strokeStyle + fillstyle : this.ctx.fillStyle, + strokeStyle : this.ctx.strokeStyle, + strokeStyleId : this.strokeStyleId, + strokeWidth : this.strokeWidth }; if (additional) @@ -528,10 +528,9 @@ { var next = this.state[i]; - this.ctx.lineWidth = next.lineWidth; this.ctx.fillstyle = next.fillStyle; this.ctx.strokeStyle = next.strokeStyle; - + this.setLineStroke(next.strokeStyleId, next.strokeWidth); var x; var y; var width; @@ -668,12 +667,12 @@ /** * Sets the stroke style. * - * @param {Number} strokeStyle + * @param {Number} strokeStyleId * The predefined stroke style. */ - Window.prototype.setStrokeStyle = function(strokeStyle) + Window.prototype.setStrokeStyleId = function(strokeStyleId) { - this.strokeStyle = strokeStyle; + this.strokeStyleId = strokeStyleId; }; /** @@ -690,15 +689,16 @@ /** * Sets the line stroke. * - * @param {Number} strokeStyle - * The predefined stroke style. + * @param {Number} strokeStyleId + * The predefined stroke style id. * @param {Number} width * The stroke line width. */ - Window.prototype.setLineStroke = function(strokeStyle, width) + Window.prototype.setLineStroke = function(strokeStyleId, width) { - this.setStrokeStyle(strokeStyle); + this.setStrokeStyleId(strokeStyleId); this.setStrokeWidth(width); + strokesManager.applyStrokeToCanvas(this.ctx, strokeStyleId, width); }; /** @@ -708,7 +708,7 @@ * The encoded list of drawing operations. */ Window.prototype.draw = function(message) - { + { var numOps = p2j.socket.readInt32BinaryMessage(message, 5); console.log("START DRAWING CYCLE"); @@ -870,7 +870,7 @@ path = this.drawLine(this.ctx, x1, y1, x2, y2, this.rawColor); strokesManager.applyStrokeToPath(this.ctx, - this.strokeStyle, + this.strokeStyleId, this.strokeWidth, this.rawColor, path); @@ -884,7 +884,7 @@ path = this.drawRect(this.ctx, x, y, width, height, this.rawColor, false); strokesManager.applyStrokeToPath(this.ctx, - this.strokeStyle, + this.strokeStyleId, this.strokeWidth, this.rawColor, path); @@ -904,6 +904,9 @@ width = p2j.socket.readInt32BinaryMessage(message, idx + 9); height = p2j.socket.readInt32BinaryMessage(message, idx + 13); + extra = " x = " + x.toString() +"; y = " + y.toString() + "; width = " + width + + "; height = " + height; + //alert(extra); var encoding = message[idx + 17]; var key = p2j.socket.readInt32BinaryMessage(message, idx + 18); var pixelsInBytes = width * height * 4; @@ -977,9 +980,10 @@ this.setColor([ r, g, b ]); break; case ops.SET_LINE_STROKE: - var strokeStyle = p2j.socket.readInt32BinaryMessage(message, idx + 1); + var strokeStyleId = p2j.socket.readInt32BinaryMessage(message, idx + 1); var strokeWidth = p2j.socket.readInt32BinaryMessage(message, idx + 5); - this.setLineStroke(strokeStyle, strokeWidth); + this.setLineStroke(strokeStyleId, strokeWidth); + extra = " strokeStyleId = " + strokeStyleId + "; strokeWidth = " + strokeWidth; break; case ops.SET_FONT: fontId = p2j.socket.readInt32BinaryMessage(message, idx + 1); @@ -1354,7 +1358,7 @@ while (true) { - if (strokesManager.isDirectDrawingStrokeStyle(this.strokeStyle)) + if (strokesManager.isDirectDrawingStrokeStyle(this.strokeStyleId)) { this.drawPixel(ctx, x, y, color); } === modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js' --- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js 2015-08-20 16:45:52 +0000 +++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.strokes.js 2015-08-24 12:42:08 +0000 @@ -203,7 +203,7 @@ * @param {Number} width * The line width. */ - this.apply = function(context, strokeStyle, width) + this.applyStrokeToCanvas = function(context, strokeStyle, width) { if (context instanceof CanvasRenderingContext2D) {