windows canvas

by Core yan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <section>
<div class="container">
  <div class="col-md-7 " >
                       		<div class="previewWindow " style="margin:20px; border:1px solid #dedede; height:450px;">
  
 <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
	 <defs>
	  <linearGradient y2="0" x2="0" y1="0" x1="0" id="svg_34">
	   <stop offset="0" stop-opacity="0.996094" stop-color="#005fbf"/>
	   <stop offset="1" stop-opacity="0.996094" stop-color="#aaffff"/>
	  </linearGradient>
	  <filter id="svg_13_blur">
	   <feGaussianBlur stdDeviation="0" in="SourceGraphic"/>
	  </filter>
	 </defs>
 
<g>
  <rect stroke="#4c4c4c" id="svg_4" height="348.000003" width="430" y="19.937579" x="69.937579" fill-opacity="null" fill="#fff"/>
  <rect filter="url(#svg_13_blur)" stroke="#000" id="svg_13" height="330" width="200" y="30" x="80.558659" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/>
  <rect stroke="#878787" id="svg_16" height="290" width="160" y="50" x="100" fill-opacity="0.2" fill="url(#svg_34)"/>

  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_39" y2="190.839194" x2="258.478307" y1="51.671767" x1="101.592968" fill-opacity="0.4" fill="none"/>
  <line stroke="#ffffff" transform="rotate(-90 180.03764343261727,264.2770080566407) " stroke-linecap="null" stroke-linejoin="null" id="svg_40" y2="342.735064" x2="254.064658" y1="185.81894" x1="106.010662" fill-opacity="0.4" fill="none"/>
  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_41" y2="51.137091" x2="178.318907" y1="338.509754" x1="101.622278" fill-opacity="0.4" fill="none"/>
  <line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_43" y2="338.571435" x2="258.444753"...

CSS

.red {background:#e74c3c!important}
	.blue {background:#3498db!important}
	.green {background:#2ecc71!important}
	.black {background:#34495e!important; }
	.center {text-align: center; padding: 5px; }
	.white{color:#fff!important}

JavaScript

$(function(){
									var pL = 0; mL = 0; pR = 0; mR = 0; rama1=0;
									
								    var rama = Number( $('#svg_4').attr('width'));
									//okno2
									var ramaOknoRw = Number( $('#svg_53').attr('width'));
									var ramaOknoRx = Number( $('#svg_53').attr('x'));
								    var oknoR = Number( $('#svg_54').attr('width'));
								    var oknoRx = Number( $('#svg_54').attr('x'));
									var zamokR =  Number( $('#svg_62').attr('cx'));
									var ruchkaR =  Number( $('#svg_63').attr('x'));
									
									
									var ramaOknoL = Number( $('#svg_13').attr('width'));
									var oknoL = Number( $('#svg_16').attr('width'));
								    var dltopL = Number( $('#svg_41').attr('x2'));
								    var drtopLx1 = Number( $('#svg_43').attr('x1'));
								    var drbottomLx2 = Number( $('#svg_43').attr('x2'));
								    var kitopL = Number( $('#svg_39').attr('x2'));
								    var kibottomL = Number( $('#svg_40').attr('y2'));
									var zamokL =  Number( $('#svg_32').attr('cx'));
									var ruchkaL =  Number( $('#svg_61').attr('x'));
									
									
								    var dltopRx1 = Number( $('#svg_57').attr('x1'));
								    var dltopRx2 = Number( $('#svg_57').attr('x2'));
								    var drtopRx1 = Number( $('#svg_58').attr('x1'));
								    var drtopRx2 = Number( $('#svg_58').attr('x2'));
								    var kitopRx1 = Number( $('#svg_59').attr('x1'));
								    var kitopRx2 = Number( $('#svg_59').attr('x2'));
								    var kibottomRx1 = Number( $('#svg_60').attr('x1'));
								    var kibottomRx2 = Number( $('#svg_60').attr('x2'));
									
									
									$('#plusSizeR').on('click',function(){ 	pR+=5; okno2(); });
									$('#minSizeR').on('click',function(){	mR-=5; okno2(); });
									
									$('#plusSizeL').on('click',function(){	pL+=5; okno1(); });
									$('#minSizeL').on('click',function(){	mL-=5; okno1(); });
									
									
									
									
								  function okno1(){
									  console.log(rama )
									   ...