JSFiddle - React, Tailwind, and code Playground

by swesh

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div style="width:100%;">
    <!--<div style="cursor:pointer; display: inline-block;color:blue;" id="Landscape">
       Switch to Landscape
    </div>
    <div style="cursor:pointer; display: inline-block;color:blue;" id="Portrait">
       Switch to Portrait
    </div>-->
  <div>sizes</div>
    <select id="size">
        <option  value="---" >Select one</option>
        <option  value="2by4" >2X4</option>
        <option  value="3by5">3X5</option>
        <option value="3by6">3X6</option>
        <option  value="3by8">3X8</option>
        <option  value="3by10">3X10</option>
        <option  value="4by5">4x5</option>
        <option  value="4by6">4X6</option>
        <option  value="4by8">4X8</option>
        <option  value="4by10" >4X10</option>
    </select>
</div>
<div style="width:80%; display:block;">
    <canvas id="canvas" width="500" height="500" style="border: 1px solid red">
    </canvas>
</div>

JavaScript

var c=document.getElementById("canvas");
var canvasWidth = 500;
var canvasHeight = 500;
var ctx=c.getContext("2d");

$("#size").change(function(){
  var value = $(this).val().split("by");
  var modifiedWidth, modifiedHeight;
            
  if(value[0]>value[1]){
    modifiedWidth = 500;
    modifiedHeight = solve(modifiedWidth, undefined, value[0], value[1])
  }
  else {
    modifiedHeight = 500;
   modifiedWidth  = solve(undefined, modifiedHeight, value[0], value[1]);
  }
  $(c).animate({
                width: modifiedWidth,
                height : modifiedHeight
            }, 20);
});
function solve(width, height, numerator, denominator) {
var value;
            // solve for width
            if ('undefined' !== typeof width) {
                value = false ? Math.round(width / (numerator / denominator)) : width / (numerator / denominator);
            }
            // solve for height
            else if ('undefined' !== typeof height) {
                value = false ? Math.round(height * (numerator / denominator)) : height * (numerator / denominator);
            }
            return value;
}