![](\""+self.filepath+"/img/tool-"+self.toolbar['tools'][tool]+".png\"){kind=small}
For more info how this works see RoCanvas Documentation.
21 | 22 |Below is just a canvas element that's turned into RoCanvas using the default settings.
25 | 26 | 27 | 28 |
30 | var r=new RoCanvas;
31 | r.RO("sampleBoard");
32 |
40 | var r2=new RoCanvas;
41 | r2.RO("sampleBoard2", {
42 | "toolbar": {
43 | colors: ["pink", "#FFF","#000","#FF0000","#00FF00","#0000FF","#FFFF00","#00FFFF"],
44 | custom_color: false,
45 | tools: ['path', 'circle', 'rectangle'],
46 | sizes: null,
47 | saveButton: {"text": "Save", "callback": "testSave(r2);"}
48 | },
49 | "settings": {
50 | color: 'pink'
51 | }
52 | });
53 | "; 130 | 131 | if(self.toolbar.clearButton) 132 | { 133 | toolBarHTML+='"; 134 | } 135 | 136 | if(self.toolbar.saveButton) 137 | { 138 | var saveButtonCallback=""; 139 | if(self.toolbar.saveButton.callback) saveButtonCallback=' onclick="'+ self.toolbar.saveButton.callback + '(this);"'; 140 | toolBarHTML+=''; 141 | } 142 | toolBarHTML+="
"; 143 | } 144 | 145 | toolBarDOM.innerHTML=toolBarHTML; 146 | parent.appendChild(toolBarDOM); 147 | 148 | // Check the element is in the DOM and the browser supports canvas 149 | if(self.canvas.getContext) 150 | { 151 | // Initaliase a 2-dimensional drawing context 152 | self.context = self.canvas.getContext('2d'); 153 | self.context.strokeStyle = self.color; 154 | self.context.lineJoin = self.shape; 155 | self.context.lineWidth = self.lineWidth; 156 | } 157 | 158 | /* declare touch actions */ 159 | 160 | var touchX,touchY; 161 | 162 | self.canvas.addEventListener('touchstart', function(e){ 163 | getTouchPos(e); 164 | 165 | self.startX=touchX; 166 | self.startY=touchY; 167 | 168 | self.paint = true; 169 | 170 | if(self.drawTool=='path') 171 | { 172 | self.addClick(touchX, touchY); 173 | self.redraw(); 174 | } 175 | 176 | event.preventDefault(); 177 | }, false); 178 | 179 | self.canvas.addEventListener('touchmove', function(e){ 180 | getTouchPos(e); 181 | 182 | self.startX=touchX; 183 | self.startY=touchY; 184 | 185 | if(self.paint) 186 | { 187 | // clear any rectangles that should be cleared 188 | self.context.clearRect(self.clearRect[0],self.clearRect[1], 189 | self.clearRect[2],self.clearRect[3]); 190 | // clear any circles that have to be cleared 191 | // set color to white but remember old color 192 | self.context.strokeStyle=self.context.fillStyle='#ffffff'; 193 | self.context.beginPath(); 194 | self.context.arc(self.clearCircle[0],self.clearCircle[1],self.clearCircle[2],0,Math.PI*2); 195 | self.context.closePath(); 196 | self.context.stroke(); 197 | self.context.fill(); 198 | self.setColor(self.color); 199 | 200 | // draw different shapes 201 | switch(self.drawTool) 202 | { 203 | case 'rectangle': 204 | case 'filledrectangle': 205 | w = e.pageX - touchX - self.startX; 206 | h = e.pageY - touchY - self.startY; 207 | 208 | // insert postions for clearing 209 | self.clearRect=[self.startX, self.startY, w, h]; 210 | 211 | if(self.drawTool=='rectangle') 212 | { 213 | self.context.strokeRect(self.startX, self.startY, w, h); 214 | } 215 | else 216 | { 217 | self.context.fillRect(self.startX, self.startY, w, h); 218 | } 219 | break; 220 | case 'circle': 221 | case 'filledcircle': 222 | w = Math.abs(e.pageX - touchX - self.startX); 223 | h = Math.abs(e.pageY - touchY - self.startY); 224 | 225 | // r is the bigger of h and w 226 | r = h>w?h:w; 227 | 228 | // remember to clear it 229 | self.clearCircle=[self.startX, self.startY, r]; 230 | 231 | self.context.beginPath(); 232 | // draw from the center 233 | self.context.arc(self.startX,self.startY,r,0,Math.PI*2); 234 | self.context.closePath(); 235 | 236 | if(self.drawTool=='circle') 237 | { 238 | // fill with white, then stroke 239 | var oldColor=self.color; 240 | self.setColor("#FFFFFF"); 241 | self.context.fill(); 242 | 243 | self.setColor(oldColor); 244 | self.context.stroke(); 245 | } 246 | else self.context.fill(); 247 | break; 248 | default: 249 | self.addClick(e.pageX - document.getElementById(id).offsetLeft, e.pageY - document.getElementById(id).offsetTop, true); 250 | break; 251 | } 252 | 253 | self.redraw(); 254 | 255 | event.preventDefault(); 256 | } 257 | },false); 258 | 259 | function getTouchPos(e) { 260 | if (!e) 261 | var e = event; 262 | 263 | if (e.touches) { 264 | if (e.touches.length == 1) { // Only deal with one finger 265 | var touch = e.touches[0]; // Get the information for finger #1 266 | touchX=touch.pageX-touch.target.offsetLeft; 267 | touchY=touch.pageY-touch.target.offsetTop; 268 | } 269 | } 270 | } 271 | 272 | /* declare mouse actions */ 273 | 274 | // on mouse down 275 | self.canvas.addEventListener('mousedown', function(e){ 276 | var mouseX = e.pageX - this.offsetLeft; 277 | self.startX=mouseX; 278 | var mouseY = e.pageY - this.offsetTop; 279 | self.startY=mouseY; 280 | 281 | self.paint = true; 282 | 283 | if(self.drawTool=='path') 284 | { 285 | self.addClick(mouseX, mouseY); 286 | self.redraw(); 287 | } 288 | }, false); 289 | 290 | // on dragging 291 | self.canvas.addEventListener('mousemove', function(e) 292 | { 293 | if(self.paint) 294 | { 295 | // clear any rectangles that should be cleared 296 | self.context.clearRect(self.clearRect[0],self.clearRect[1], 297 | self.clearRect[2],self.clearRect[3]); 298 | // clear any circles that have to be cleared 299 | // set color to white but remember old color 300 | self.context.strokeStyle=self.context.fillStyle='#ffffff'; 301 | self.context.beginPath(); 302 | self.context.arc(self.clearCircle[0],self.clearCircle[1],self.clearCircle[2],0,Math.PI*2); 303 | self.context.closePath(); 304 | self.context.stroke(); 305 | self.context.fill(); 306 | self.setColor(self.color); 307 | 308 | // draw different shapes 309 | switch(self.drawTool) 310 | { 311 | case 'rectangle': 312 | case 'filledrectangle': 313 | w = e.pageX - this.offsetLeft - self.startX; 314 | h = e.pageY - this.offsetTop - self.startY; 315 | 316 | // insert postions for clearing 317 | self.clearRect=[self.startX, self.startY, w, h]; 318 | 319 | if(self.drawTool=='rectangle') 320 | { 321 | self.context.strokeRect(self.startX, self.startY, w, h); 322 | } 323 | else 324 | { 325 | self.context.fillRect(self.startX, self.startY, w, h); 326 | } 327 | break; 328 | case 'circle': 329 | case 'filledcircle': 330 | w = Math.abs(e.pageX - this.offsetLeft - self.startX); 331 | h = Math.abs(e.pageY - this.offsetTop - self.startY); 332 | 333 | // r is the bigger of h and w 334 | r = h>w?h:w; 335 | 336 | // remember to clear it 337 | self.clearCircle=[self.startX, self.startY, r]; 338 | 339 | self.context.beginPath(); 340 | // draw from the center 341 | self.context.arc(self.startX,self.startY,r,0,Math.PI*2); 342 | self.context.closePath(); 343 | 344 | if(self.drawTool=='circle') 345 | { 346 | // fill with white, then stroke 347 | var oldColor=self.color; 348 | self.setColor("#FFFFFF"); 349 | self.context.fill(); 350 | 351 | self.setColor(oldColor); 352 | self.context.stroke(); 353 | } 354 | else self.context.fill(); 355 | break; 356 | default: 357 | self.addClick(e.pageX - document.getElementById(id).offsetLeft, e.pageY - document.getElementById(id).offsetTop, true); 358 | break; 359 | } 360 | 361 | self.redraw(); 362 | } 363 | }, false); 364 | 365 | // when mouse is released 366 | self.canvas.addEventListener('mouseup', function(e){ 367 | self.paint = false; 368 | 369 | self.clickX = new Array(); 370 | self.clickY = new Array(); 371 | self.clickDrag = new Array(); 372 | self.clearRect=[0,0,0,0]; 373 | self.clearCircle=[0,0,0]; 374 | }, false); 375 | 376 | this.canvas.addEventListener('mouseleave', function(e){ 377 | self.paint = false; 378 | }, false); 379 | }; 380 | 381 | this.addClick = function(x, y, dragging) 382 | { 383 | self.clickX.push(x); 384 | self.clickY.push(y); 385 | self.clickDrag.push(dragging); 386 | }; 387 | 388 | this.redraw = function() 389 | { 390 | for(var i=0; i < self.clickX.length; i++) 391 | { 392 | self.context.beginPath(); 393 | if(self.clickDrag[i] && i){ 394 | self.context.moveTo(self.clickX[i-1], self.clickY[i-1]); 395 | }else{ 396 | self.context.moveTo(self.clickX[i]-1, self.clickY[i]); 397 | } 398 | 399 | self.context.lineTo(self.clickX[i], self.clickY[i]); 400 | self.context.closePath(); 401 | self.context.stroke(); 402 | } 403 | }; 404 | 405 | // blank the entire canvas 406 | this.clearCanvas = function() 407 | { 408 | oldLineWidth=self.context.lineWidth; 409 | self.context.clearRect(0,0,self.canvas.width,self.canvas.height); 410 | self.canvas.width = self.canvas.width; 411 | 412 | self.clickX = new Array(); 413 | self.clickY = new Array(); 414 | RoCanvas.clickDrag = new Array(); 415 | self.setSize(oldLineWidth); 416 | self.context.lineJoin = self.shape; 417 | self.setColor(self.color); 418 | }; 419 | 420 | // sets the size of the drawing line in pixels 421 | this.setSize = function(px) 422 | { 423 | self.context.lineWidth=px; 424 | }; 425 | 426 | // sets the tool to draw 427 | this.setTool = function(tool) 428 | { 429 | self.drawTool=tool; 430 | }; 431 | 432 | this.setColor = function setColor(col) 433 | { 434 | self.context.strokeStyle = col; 435 | self.context.fillStyle = col; 436 | self.color=col; 437 | }; 438 | 439 | // finds the location of this file 440 | // required to render proper include path for images 441 | this.fileLocation = function() 442 | { 443 | var scripts = document.getElementsByTagName('script'); 444 | for(i=0; i