Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="wrapper">
  <div class="container">
    <div class="canvas-container">

      <canvas id="canvas">

      </canvas>

      <svg class="chick" viewBox="0 0 1194 746" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
                <g transform="translate(-64.56 -15.586)">
                  <g id="bird" transform="matrix(.81276 0 0 .81276 214.428 100.226)">
                    <path d="M805.881 204.494c21.144 4.466 42.738 25.926 54.545 42.387 11.403 15.897 15.795 36.489 18.229 56.407l-59.693.332c-.876-31.894-4.762-65.68-13.081-99.126z" stroke="#000" stroke-width="2.39" transform="matrix(.50467 .01863 -.01799 .52272 343.762 157.966)" id="nose"/>
                    <path d="M997.844 759.671c1.511-52.935-10.594-97.227-22.693-141.845-31.954-117.84-169.249-238.887-347.621-241.647C452.495 373.47 338.693 494.3 288.555 621.424c-17.671 44.807-27.745 90.799-30.246 138.825l739.535-.578z" fill="#ffd052" transform="matrix(-.54274 .0005 -.00045 -.5231 893.317 729.314)" id="body"/>
                    <path d="M997.844 759.671c1.511-52.935-10.594-97.227-22.693-141.845-31.954-117.84-169.249-238.887-347.621-241.647C452.495 373.47 338.693 494.3 288.555 621.424c-17.671 44.807-27.745 90.799-30.246 138.825l739.535-.578z" fill="#ff8327" transform="matrix(.4048 .00124 -.00114 .40017 349.985 27.477)" id="head"/>
                    <path d="M811.796 313.725c3.48-18.66-4.554-47.196-8.423-70.019-10.346-61.023-73.517-127.268-86.505-121.858 0 0-15.507 3.878-29.14 8.389-60.806 20.117-99.353 62.879-119.507 121.694-6.881 20.078-11.673 42.496-10.702 61.519l254.277.275z" fill="#fff" transform="matrix(.59325 0 0 .6215 271.599 137.6)" id="face"/>
                    <ellipse cx="760.796" cy="339.673" rx="28.893" ry="30.301" id="iris" transform="matrix(.505 0 0 .52305 281.735 106.786)"/>
                    <path d="M762.335 333.548c2.263 24.529-29.583 81.997-78.019 83.617-59.291 1.983-89.827-56.592-83.918-83.113l161.937-.504z" fill="#ffb73b" transform="matrix(1.20493 0 0 1.19145 -316.933 -66.202)" id="wing"/>
                  </g>
                </g>
              </svg>
    </div>
  </div>
</div>
              
            
!

CSS

              
                body {
  background: #00c0ff;
}

.wrapper {
  display: table;
  padding: 0;
  max-width: 1500px;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-x: hidden;
}

.container {
  display: table-cell;
  vertical-align: top;
}

.canvas-container {
  position: relative;
  max-width: 500px;
  min-width: 320px;
  margin: 0 auto;
}
#canvas {
  width: 100%;
  height: auto;
  position: absolute;
  top: 100px;
  background: #00c0ff;
  padding: 1rem;
}

.chick {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  height: auto;
  transform: translate(-200px);
  visibility: hidden;
  position: absolute;
  left: 0%;
  top: 100px;
}

              
            
!

JS

              
                // get the canvas element
var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 800;
var ctx = canvas.getContext("2d");

// function to draw a square
// the `offset` parameter can be used to change the position of the square on the canvas
/*function drawSquare(ctx, offset = 0) {
  // x, y , width, height
  ctx.rect(offset, 0, 80, 80);
  ctx.rect(0, offset, 80, 80);          
  ctx.rect(offset, 450, 80, 80);
  ctx.rect(360, offset, 80, 80);
  ctx.fillStyle = '#336896';
  ctx.fill();
  ctx.strokeStyle = '#336896';
  ctx.strokeWidth = 2;
  ctx.stroke();
  ctx.closePath();
}

// loop 
numberOfSquares = 5;

// loop that draws a square `numberOfSquares` times
for (i = 0; i < numberOfSquares; i++) {
  // `i` is the index of the loop.
  var offset = i * 90;
  // draw the square with the new offset
  // try changing the offset above to see what changes
  drawSquare(ctx, offset);
}

;


 function getMousePos(canvas, event) {
	var rect = canvas.getBoundingClientRect();
	return {
		x: event.clientX - rect.left,
		y: event.clientY - rect.top
	};
}
function isInside(pos, rect){
	return pos.x > rect.x && pos.x < rect.x+rect.width && pos.y < rect.y+rect.heigth && pos.y > rect.y
}
*/

var rect = {
  x: 0,
  y: 600,
  width: 200,
  heigth: 100
};
var rect2 = {
  x: 300,
  y: 600,
  width: 200,
  heigth: 100
};
var cord = [rect, rect2];

canvas.addEventListener(
  "click",
  function(evt) {
    var mousePos = getMousePos(canvas, evt);
    debugger;
    if (isInside(mousePos, rect)) {
      alert("clicked inside rect");
    } else if (isInside(mousePos, rect2)) {
      alert("clicked inside rect");
    }
  },
  false
);

function drawButton(xPos, yPos, text, xPos2, yPos2) {
  ctx.beginPath();
  ctx.rect(xPos, yPos, 200, 100);
  ctx.fillStyle = "#ff8528";
  ctx.fillRect(25, 72, 32, 32);
  ctx.fill();
  ctx.closePath();
  ctx.font = "36px Trebuchet MS";
  ctx.fillStyle = "white";
  ctx.fillText(text, xPos2, yPos2);
  ctx.closePath();
}
drawButton(0, 600, "Auto", 50, 670);
drawButton(300, 600, "BID", 370, 670);

var Rect = function(x, y, fill) {
  this.x = x;
  this.y = y;
  if (fill) {
    this.fill = fill;
  } else {
    this.fill = "#336896";
  }
};

Rect.prototype.draw = function(ctx) {
  ctx.save();
  ctx.beginPath();
  ctx.rect(this.x, this.y, 80, 80);
  ctx.fillStyle = this.fill;
  ctx.fill();
  ctx.strokeStyle = "#336896";
  ctx.strokeWidth = 2;
  ctx.stroke();
  ctx.closePath();
  ctx.restore();
};

var rects = [];
var xVal = 20;
var yVal = 0;

for(var i = 0; i < 6; i++){  
    rects[i] = new Rect(xVal, yVal);
    yVal += 90;  
}


// drawSquares(380, 0);
// drawSquares(380, 90);
// drawSquares(380, 180);
// drawSquares(380, 270);
// drawSquares(380, 360);
// drawSquares(380, 450);

// drawSquares(110, 0);
// drawSquares(200, 0);
// drawSquares(290, 0);

// drawSquares(110, 450);
// drawSquares(200, 450);
// drawSquares(290, 450);

render();

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawButton(0, 600, "Auto", 50, 670);
  drawButton(300, 600, "BID", 370, 670);

  for (var i = 0; i < rects.length; i++) {
    rects[i].draw(ctx);
  }

  requestAnimationFrame(render);
}

var tl = new TimelineMax({repeat: -1, yoyo: true})

tl.staggerTo(
  rects,
  0.5,
  {
    colorProps: {
      fill: "#f1af11"
    }
  },
  0.1
);

              
            
!
999px

Console