Permalink
Browse files

colours

  • Loading branch information...
Scán
Scán committed Aug 27, 2012
1 parent 31419d8 commit a6ca90bd25b618d9fbd6c922880e48cbf7cca431
@@ -63,11 +63,11 @@ $ ->
draw = (data) ->
ctx.beginPath()
if data.tool is 'eraser'
- ctx.clearRect data.position.x - (size / 2), data.position.y - (size / 2), size, size
+ ctx.clearRect data.position.x - (data.size / 2), data.position.y - (data.size / 2), data.size, data.size
else
switch data.tool
when 'pencil'
- ctx.arc data.position.x, data.position.y, data.size, 0, 2 * Math.PI, no
+ ctx.arc data.position.x, data.position.y, (data.size / 2), 0, 2 * Math.PI, no
ctx.fillStyle = data.colour
ctx.fill()
ctx.lineWidth = 1
@@ -108,3 +108,10 @@ $ ->
($ '#toolsize').change ->
size = (parseInt $(@).val()) or 1
($ '#sizespan').text size.toString()
+ ($ '#toolcolour').val colour.substr 1
+ ($ '#colourspan').css
+ 'background-color': colour
+ ($ '#toolcolour').change ->
+ colour = "##{$(@).val()}"
+ ($ '#colourspan').css
+ 'background-color': colour
View
@@ -72,11 +72,11 @@
draw = function(data) {
ctx.beginPath();
if (data.tool === 'eraser') {
- return ctx.clearRect(data.position.x - (size / 2), data.position.y - (size / 2), size, size);
+ return ctx.clearRect(data.position.x - (data.size / 2), data.position.y - (data.size / 2), data.size, data.size);
} else {
switch (data.tool) {
case 'pencil':
- ctx.arc(data.position.x, data.position.y, data.size, 0, 2 * Math.PI, false);
+ ctx.arc(data.position.x, data.position.y, data.size / 2, 0, 2 * Math.PI, false);
}
ctx.fillStyle = data.colour;
ctx.fill();
@@ -118,10 +118,20 @@
tool = 'eraser';
return false;
});
- return ($('#toolsize')).change(function() {
+ ($('#toolsize')).change(function() {
size = (parseInt($(this).val())) || 1;
return ($('#sizespan')).text(size.toString());
});
+ ($('#toolcolour')).val(colour.substr(1));
+ ($('#colourspan')).css({
+ 'background-color': colour
+ });
+ return ($('#toolcolour')).change(function() {
+ colour = "#" + ($(this).val());
+ return ($('#colourspan')).css({
+ 'background-color': colour
+ });
+ });
});
}
});
@@ -28,3 +28,7 @@ section,footer,header{display:block}
#chatpanel label#first{line-height:45px}
#toolbox{background:#fff;-webkit-transition:width 1s;-moz-transition:width 1s;-o-transition:width 1s;-ms-transition:width 1s;transition:width 1s;-moz-transition:width 1s;-webkit-transition:width 1s;-o-transition:width 1s;position:fixed;left:0;top:0;width:0;height:100%;overflow:hidden;border-right:10px solid #888;}
#toolbox:hover{width:100px}
+#toolbox input,#toolbox button,#toolbox label{display:block;width:80%;margin:2px auto}
+#toolbox label{text-align:center;overflow:hidden}
+#toolbox #toolcolour{display:inline-block;width:50px}
+#toolbox #colourspan{margin:2px;display:inline-block;width:12px;height:12px}
@@ -128,3 +128,20 @@ section, footer, header
&:hover
width: 100px
+
+ input, button, label
+ display: block
+ width: 80%
+ margin: 2px auto
+ label
+ text-align: center
+ overflow: hidden
+
+ #toolcolour
+ display: inline-block
+ width: 50px
+ #colourspan
+ margin: 2px
+ display: inline-block
+ width: 12px
+ height: 12px
View
@@ -4,6 +4,7 @@ html(lang='en')
meta(charset='utf-8')
title Open Canvas
link(rel='stylesheet', href='/stylesheets/styles.css', type='text/css')
+ script(src='https://github.com/fryn/html5slider/raw/master/html5slider.js')
//if lt IE 9
script(src='http://html5shiv.googlecode.com/svn/trunk/html5.js')
body
@@ -32,6 +33,10 @@ html(lang='en')
label(for='toolsize')
| Size:
span#sizespan 1
+ p
+ | #
+ input#toolcolour(type='text', size=6)
+ span#colourspan
script(src='/socket.io/socket.io.js')
script(src='http://code.jquery.com/jquery-1.8.0.min.js')
script(src='/javascripts/main.js')

0 comments on commit a6ca90b

Please sign in to comment.