drewlesueur · June 29, 2010 20:08
diff --git a/canvas_demo.html b/canvas_demo.html
 <!doctype html>
 <html>
 <head>
 <!--[if IE]><script src="excanvas.js"></script><![endif]--> 
 <script src="jquery.js"></script>
 <script>

 function draw() {

  function drawTile() {
          var options = arguments[0] || {}
          var r = options.radius || 25;
          //var ctx = document.getElementById('canvas').getContext('2d');
          
          
           var canvas = $('<canvas width="'+(r*2)+'" height="'+(r*2)+'"></canvas>')
          $(document.body).append(canvas)
          var ctx = canvas[0].getContext('2d');

          
          var radgrad = ctx.createRadialGradient(r,r,0,r,r,r);
          radgrad.addColorStop(0, 'rgba(0,0,255,0.25)');
          //radgrad.addColorStop(0.5, '#FFFF00');
          radgrad.addColorStop(1, 'rgba(0,0,255,0)');
          ctx.fillStyle = radgrad;
          ctx.fillRect(0,0,150,150);
          
          var spotImageData = ctx.getImageData(0, 0, r*2, r*2)
          
          var colors_canvas = $('<canvas width="256" height="5"></canvas>');
          $(document.body).append(colors_canvas)
          var colors = colors_canvas[0].getContext('2d');
          var lingrad = colors.createLinearGradient(0,0,255,0);
          var stops = options.stops || {"0" : "rgba(255,0,0, 0)", "0.5" : "rgba(255,128,0,0.5)", "1" : "rgba(255,255,0,1)"}
          
          for (var i in stops) {
              lingrad.addColorStop(i-0, stops[i]);
          }
          
          colors.fillStyle = lingrad
          colors.fillRect(0,0,256,5);
          var colorsImageData = colors.getImageData(0,0,256,1);
          var colorsData = colorsImageData.data;
          var tileSize = options.tileSize || 256;
          var tile_canvas = $('<canvas width="'+tileSize+'" height="'+tileSize+'"></canvas>');
          $(document.body).append(tile_canvas)
          var tile = tile_canvas[0].getContext('2d');
          var points = options.points || []
          for (var i=0; i < points.length; i++) {
             var point = points[i]
             for (j = 0; j < point[2]; j++) {
                //tile.putImageData(spotImageData,point[0],point[1])
                tile.drawImage(canvas[0], point[0], point[1])
                //var radgrad = tile.createRadialGradient(point[0],point[1],0,point[0],point[1],r);
                //  radgrad.addColorStop(0, 'rgba(255,255,255,0.5)');
                  //radgrad.addColorStop(0.5, '#FFFF00');
                //  radgrad.addColorStop(1, 'rgba(0,0,0,0.5)');
                //tile.fillStyle = radgrad;
                //tile.fillRect(point[0] - r,point[1] - r,r*2,r*2);
             }
          }
          
          //return;
          
          var opacity = options.opacity || 0.75
          var tileImageData = tile.getImageData(0,0,tileSize, tileSize);
          var data = tileImageData.data;
          for (var i=0; i < data.length; i+=4) {
             if (0 && data[i] == 0 && data[i+1] == 0 && data[i+2] == 0) {
                
                data[i] = 255
                 data[i+1] = 255
                 data[i+2] = 255
                 data[i+3] = 0
                 continue;
             }
             data[i] = colorsData[data[i+3]*4];
             data[i+1] = colorsData[data[i+3]*4+1];
             data[i+2] = colorsData[data[i+3]*4+2];
             data[i+3] = colorsData[data[i+3]*4+3] * opacity;
          }
          tile.putImageData(tileImageData, 0, 0)
          return tile_canvas[0].toDataURL();
  }
  
  console.log(drawTile({points : [[0,-10,1], [100,100,3], [105,105,1], [170, 100, 5], [190,100,5]]})); 
 }

 $(draw)

 </script>
 </head>
 <body>
 </body>

 </html>
	<!doctype html>
	<html>
	<head>
	<!--[if IE]><script src="excanvas.js"></script><![endif]-->
	<script src="jquery.js"></script>
	<script>

	function draw() {

	function drawTile() {
	var options = arguments[0] \|\| {}
	var r = options.radius \|\| 25;
	//var ctx = document.getElementById('canvas').getContext('2d');


	var canvas = $('<canvas width="'+(r2)+'" height="'+(r2)+'"></canvas>')
	$(document.body).append(canvas)
	var ctx = canvas[0].getContext('2d');


	var radgrad = ctx.createRadialGradient(r,r,0,r,r,r);
	radgrad.addColorStop(0, 'rgba(0,0,255,0.25)');
	//radgrad.addColorStop(0.5, '#FFFF00');
	radgrad.addColorStop(1, 'rgba(0,0,255,0)');
	ctx.fillStyle = radgrad;
	ctx.fillRect(0,0,150,150);

	var spotImageData = ctx.getImageData(0, 0, r2, r2)

	var colors_canvas = $('<canvas width="256" height="5"></canvas>');
	$(document.body).append(colors_canvas)
	var colors = colors_canvas[0].getContext('2d');
	var lingrad = colors.createLinearGradient(0,0,255,0);
	var stops = options.stops \|\| {"0" : "rgba(255,0,0, 0)", "0.5" : "rgba(255,128,0,0.5)", "1" : "rgba(255,255,0,1)"}

	for (var i in stops) {
	lingrad.addColorStop(i-0, stops[i]);
	}

	colors.fillStyle = lingrad
	colors.fillRect(0,0,256,5);
	var colorsImageData = colors.getImageData(0,0,256,1);
	var colorsData = colorsImageData.data;
	var tileSize = options.tileSize \|\| 256;
	var tile_canvas = $('<canvas width="'+tileSize+'" height="'+tileSize+'"></canvas>');
	$(document.body).append(tile_canvas)
	var tile = tile_canvas[0].getContext('2d');
	var points = options.points \|\| []
	for (var i=0; i < points.length; i++) {
	var point = points[i]
	for (j = 0; j < point[2]; j++) {
	//tile.putImageData(spotImageData,point[0],point[1])
	tile.drawImage(canvas[0], point[0], point[1])
	//var radgrad = tile.createRadialGradient(point[0],point[1],0,point[0],point[1],r);
	// radgrad.addColorStop(0, 'rgba(255,255,255,0.5)');
	//radgrad.addColorStop(0.5, '#FFFF00');
	// radgrad.addColorStop(1, 'rgba(0,0,0,0.5)');
	//tile.fillStyle = radgrad;
	//tile.fillRect(point[0] - r,point[1] - r,r2,r2);
	}
	}

	//return;

	var opacity = options.opacity \|\| 0.75
	var tileImageData = tile.getImageData(0,0,tileSize, tileSize);
	var data = tileImageData.data;
	for (var i=0; i < data.length; i+=4) {
	if (0 && data[i] == 0 && data[i+1] == 0 && data[i+2] == 0) {

	data[i] = 255
	data[i+1] = 255
	data[i+2] = 255
	data[i+3] = 0
	continue;
	}
	data[i] = colorsData[data[i+3]*4];
	data[i+1] = colorsData[data[i+3]*4+1];
	data[i+2] = colorsData[data[i+3]*4+2];
	data[i+3] = colorsData[data[i+3]4+3] opacity;
	}
	tile.putImageData(tileImageData, 0, 0)
	return tile_canvas[0].toDataURL();
	}

	console.log(drawTile({points : [[0,-10,1], [100,100,3], [105,105,1], [170, 100, 5], [190,100,5]]}));
	}

	$(draw)

	</script>
	</head>
	<body>
	</body>

	</html>