Записи

<table width="500" height="500" align="center" class="colorborder" >
 <tr>
 <td width="500" height="300" class="colorborder"><canvas id="v103idcanvas" width="500" height="300"></canvas></td>
 </tr>
 <tr id="v103visibleKub1"><td align="left">
кнопка
 </td></tr>
 <tr id="v103visibleKub2"><td align="center">
 x: <input type="range" id="v103butx" max="550" min="0" value="60" />
 <span id="v103spanbutx">0</span>
 y: <input type="range" id="v103buty" max="300" min="0" value="60" />
 <span id="v103spanbuty">0</span>
 </td></tr>
 <tr id="v103visibleKub3"><td align="center">
 width: <input type="range" id="v103width" max="550" min="20" value="60" />
 <span id="v103spanwidth">0</span>
 height: <input type="range" id="v103height" max="250" min="20" value="60" />
 <span id="v103spanheight">0</span>
 </td></tr>
 <tr id="v103visibleKub4"><td align="center">
 color a1: <input type="range" id="v103a1" max="255" min="0" value="255" />
 <span id="v103spana1">255</span>
 color a2: <input type="range" id="v103a2" max="255" min="0" value="0" />
 <span id="v103spana2">0</span>
 </td></tr>
 <tr id="v103visibleKub5"><td align="center">
 color a3: <input type="range" id="v103a3" max="255" min="0" value="0" />
 <span id="v103spana3">0</span>
 </td></tr>
 <tr id="v103visibleRamka1"><td align="left">
окантовка
 </td></tr>
 <tr id="v103visibleRamka2"><td align="center">
 x: <input type="range" id="v103bx" max="550" min="0" value="60" />
 <span id="v103spanbx">0</span>
 y: <input type="range" id="v103by" max="300" min="0" value="60" />
 <span id="v103spanby">0</span>
 </td></tr>
 <tr id="v103visibleRamka3"><td align="center">
 width: <input type="range" id="v103bw" max="550" min="0" value="55" />
 <span id="v103spanbw">0</span>
 height: <input type="range" id="v103bh" max="250" min="0" value="55" />
 <span id="v103spanbh">0</span>
 </td></tr>
 <tr id="v103visibleRamka4"><td align="center">
 color b1: <input type="range" id="v103b1" max="255" min="0" value="0" />
 <span id="v103spanb1">0</span>
 color b2: <input type="range" id="v103b2" max="255" min="0" value="255" />
 <span id="v103spanb2">0</span>
 </td></tr>
 <tr id="v103visibleRamka5"><td align="center">
 pen: <input type="range" id="v103bt" max="20" min="0" value="3" />
 <span id="v103spanbt">3</span>
 color b3: <input type="range" id="v103b3" max="255" min="0" value="0" />
 <span id="v103spanb3">0</span>
 </td></tr>
 <tr id="v103visibleText1"><td align="left">
текст
 </td></tr>
 <tr id="v103visibleText2"><td align="center">
 sting: <input id="v103ft" value="Sample String" style="width: 100px;" class="flat"> 
 </td></tr>
 <tr id="v103visibleText3"><td align="center">
 x: <input type="range" id="v103fx" max="550" min="0" value="90" />
 <span id="v103spanfx">0</span>
 y: <input type="range" id="v103fy" max="300" min="0" value="90" />
 <span id="v103spanfy">0</span>
 </td></tr>
 <tr id="v103visibleText4"><td align="center">
 color c1: <input type="range" id="v103c1" max="255" min="0" value="0" />
 <span id="v103spanc1">0</span>
 color c2: <input type="range" id="v103c2" max="255" min="0" value="0" />
 <span id="v103spanc2">0</span>
 </td></tr>
 <tr id="v103visibleText5"><td align="center">
 color c3: <input type="range" id="v103c3" max="255" min="0" value="255" />
 <span id="v103spanc3">0</span>
 size: <input type="range" id="v103fw" max="60" min="8" value="20" />
 <span id="v103spanfw">0</span>
 </td></tr>
 <tr><td align="center">
 <input id="v103idText" name="37" type="radio" checked="checked" onclick="v103clickselect();"/> 
 <input value="текст" onclick="document.getElementById('v103idText').checked = true; v103clickselect();" type="button">
 <input id="v103idRamka" name="37" type="radio" onclick="v103clickselect();" /> 
 <input value="рамка" onclick="document.getElementById('v103idRamka').checked = true; v103clickselect();" type="button">
 <input id="v103idKub" name="37" type="radio" onclick="v103clickselect();" /> 
 <input value="квадрат" onclick="document.getElementById('v103idKub').checked = true; v103clickselect();" type="button">
 </td></tr>
 </table>

<script>
function v103clickselect() {
document.getElementById('v103visibleKub1').hidden = true;
document.getElementById('v103visibleKub2').hidden = true;
document.getElementById('v103visibleKub3').hidden = true;
document.getElementById('v103visibleKub4').hidden = true;
document.getElementById('v103visibleKub5').hidden = true;
document.getElementById('v103visibleRamka1').hidden = true;
document.getElementById('v103visibleRamka2').hidden = true;
document.getElementById('v103visibleRamka3').hidden = true;
document.getElementById('v103visibleRamka4').hidden = true;
document.getElementById('v103visibleRamka5').hidden = true;
document.getElementById('v103visibleText1').hidden = true;
document.getElementById('v103visibleText2').hidden = true;
document.getElementById('v103visibleText3').hidden = true;
document.getElementById('v103visibleText4').hidden = true;
document.getElementById('v103visibleText5').hidden = true;
if (document.getElementById('v103idText').checked) {
 document.getElementById('v103visibleText1').hidden = false;
 document.getElementById('v103visibleText2').hidden = false;
 document.getElementById('v103visibleText3').hidden = false;
 document.getElementById('v103visibleText4').hidden = false;
 document.getElementById('v103visibleText5').hidden = false;
 }
if (document.getElementById('v103idRamka').checked) {
 document.getElementById('v103visibleRamka1').hidden = false;
 document.getElementById('v103visibleRamka2').hidden = false;
 document.getElementById('v103visibleRamka3').hidden = false;
 document.getElementById('v103visibleRamka4').hidden = false;
 document.getElementById('v103visibleRamka5').hidden = false;
 }
if (document.getElementById('v103idKub').checked) {
 document.getElementById('v103visibleKub1').hidden = false;
 document.getElementById('v103visibleKub2').hidden = false;
 document.getElementById('v103visibleKub3').hidden = false;
 document.getElementById('v103visibleKub4').hidden = false;
 document.getElementById('v103visibleKub5').hidden = false;
 }
}
v103clickselect();
var v103canvas = document.querySelector("#v103idcanvas");
var v103context = v103canvas.getContext("2d");

function v103update() {
var v103w = v103canvas.width;
var v103h = v103canvas.height;
var v103posX = document.getElementById('v103butx').value;
var v103posY = document.getElementById('v103buty').value;
var v103posW = document.getElementById('v103width').value;
var v103posH = document.getElementById('v103height').value;
var v103posBX = document.getElementById('v103bx').value;
var v103posBY = document.getElementById('v103by').value;
var v103posBW = document.getElementById('v103bw').value;
var v103posBH = document.getElementById('v103bh').value;
var v103colorA1 = document.getElementById('v103a1').value;
var v103colorA2 = document.getElementById('v103a2').value;
var v103colorA3 = document.getElementById('v103a3').value;
var v103colorB1 = document.getElementById('v103b1').value;
var v103colorB2 = document.getElementById('v103b2').value;
var v103colorB3 = document.getElementById('v103b3').value;
var v103colorC1 = document.getElementById('v103c1').value;
var v103colorC2 = document.getElementById('v103c2').value;
var v103colorC3 = document.getElementById('v103c3').value;
var v103posFX = document.getElementById('v103fx').value;
var v103posFY = document.getElementById('v103fy').value;
var v103posBT = document.getElementById('v103bt').value;
var v103posFW = document.getElementById('v103fw').value;
var v103posFT = document.getElementById('v103ft').value;
document.getElementById('v103spanbutx').innerHTML = document.getElementById('v103butx').value;
document.getElementById('v103spanbuty').innerHTML = document.getElementById('v103buty').value;
document.getElementById('v103spanwidth').innerHTML = document.getElementById('v103width').value;
document.getElementById('v103spanheight').innerHTML = document.getElementById('v103height').value;
document.getElementById('v103spanbx').innerHTML = document.getElementById('v103bx').value;
document.getElementById('v103spanby').innerHTML = document.getElementById('v103by').value;
document.getElementById('v103spanbw').innerHTML = document.getElementById('v103bw').value;
document.getElementById('v103spanbh').innerHTML = document.getElementById('v103bh').value;
document.getElementById('v103spanfx').innerHTML = document.getElementById('v103fx').value;
document.getElementById('v103spanfy').innerHTML = document.getElementById('v103fy').value;
document.getElementById('v103spanbt').innerHTML = document.getElementById('v103bt').value;
document.getElementById('v103spanfw').innerHTML = document.getElementById('v103fw').value;
document.getElementById('v103spana1').innerHTML = document.getElementById('v103a1').value;
document.getElementById('v103spana2').innerHTML = document.getElementById('v103a2').value;
document.getElementById('v103spana3').innerHTML = document.getElementById('v103a3').value;
document.getElementById('v103spanb1').innerHTML = document.getElementById('v103b1').value;
document.getElementById('v103spanb2').innerHTML = document.getElementById('v103b2').value;
document.getElementById('v103spanb3').innerHTML = document.getElementById('v103b3').value;
document.getElementById('v103spanc1').innerHTML = document.getElementById('v103c1').value;
document.getElementById('v103spanc2').innerHTML = document.getElementById('v103c2').value;
document.getElementById('v103spanc3').innerHTML = document.getElementById('v103c3').value;

 v103context.clearRect(0, 0, v103w, v103h);
 v103context.beginPath();
 v103context.rect(v103posX, v103posY, v103posW, v103posH);
 v103context.fillStyle = 'rgb('+v103colorA1+','+v103colorA2+','+v103colorA3+')';
 v103context.fill();

 v103context.beginPath();
 v103context.rect(v103posBX, v103posBY, v103posBW, v103posBH);
 v103context.strokeStyle = 'rgb('+v103colorB1+','+v103colorB2+','+v103colorB3+')';
 v103context.lineWidth = v103posBT;
 v103context.stroke();

 v103context.beginPath();
 v103context.shadowOffsetX = 2;
 v103context.shadowOffsetY = 2;
 v103context.shadowBlur = 2;
 v103context.shadowColor = "rgba(0, 0, 0, 0.5)";
 v103context.font = v103posFW + "px Times New Roman";
 v103context.fillStyle = 'rgb('+v103colorC1+','+v103colorC2+','+v103colorC3+')';
 v103context.fillText(v103posFT, v103posFX, v103posFY);
 
 requestAnimationFrame(v103update);
 }
 v103update();

 var v103MouseMove = function(e) {
 var v103mousex = e.offsetX;
 var v103mousey = e.offsetY;
 if (e.buttons > 0) {
 if (document.getElementById("v103idText").checked) {
 document.getElementById('v103fx').value = v103mousex;
 document.getElementById('v103fy').value = v103mousey;
 }
 if (document.getElementById("v103idRamka").checked) {
 document.getElementById('v103bx').value = v103mousex;
 document.getElementById('v103by').value = v103mousey;
 }
 if (document.getElementById("v103idKub").checked) {
 document.getElementById('v103butx').value = v103mousex;
 document.getElementById('v103buty').value = v103mousey;
 }
 }
};
v103canvas.addEventListener("mousemove", v103MouseMove, false);
</script>