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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <h1>The GreenScreener</h1>
<script
src="https://www.dukelearntoprogram.com//course1/common/js/image/SimpleImage.js"></script> 
<canvas id="can1"></canvas>
<canvas id="can2"></canvas>
Foreground: <input type="file" multiple="False" accept="image/*" id="fginput" onchange="upload_fg()"></input>
Background: <input type="file" multiple="False" accept="image/*" id="bginput" onchange="upload_bg()"></input>
<input type="Button" value="Mix" onclick="GreenScreen()"></input>
<input type="Button" value="clear" onclick="ClrCnvs()"></input>
              
            
!

CSS

              
                h1{
  color:grey;
  padding-left:40px;
  font-family:Arial;
}
body{
  background-color:lightskyblue;
}
canvas{
  width:800px;
  height:450px;
  border:4px ridge;
}

#fginput{
  font-size:19px;
  font-family:Georgia;
  background-color:lightyellow;
  border:2px dotted orange;
  width:256px;
}
#bginput{
  font-size:19px;
  font-family:Georgia;
  background-color:lightyellow;
  border:2px dotted orange;
  width:256px;
}}


              
            
!

JS

              
                var cnvs = document.getElementById("can1"); // the left canvas
var cnvs2 = document.getElementById("can2"); //the right canvas
var fgimage = null; //foreground image variable initialized
var bgimage = null; //background image variable initialized
function upload_fg(){
  var fin = document.getElementById("fginput");
  fgimage = new SimpleImage(fin);
  fgimage.drawTo(cnvs);
} // this is the function for uploading the foreground image to the left canvas
function upload_bg(){
  var bin = document.getElementById("bginput");
  bgimage = new SimpleImage(bin);
  bgimage.drawTo(cnvs2);
} // this is the function for uploading the background image to the right canvas
function ClrCnvs(){
  const cntx = cnvs.getContext("2d");
  cntx.clearRect(0, 0, cnvs.width, cnvs.height);
  const cntx1 = cnvs2.getContext("2d");
  cntx1.clearRect(0, 0, cnvs2.width, cnvs2.height);
}// this is the clear button function
function GreenScreen(){
  var output = new SimpleImage(fgimage.height, fgimage.width); //creating a blank image
  if(fgimage==null || ! fgimage.complete()){
    alert("Pls enter a Foreground image")
  } //check if the user has entered a foreground image
  if(bgimage==null || ! bgimage.complete()){
    alert("Pls enter a Background image")
  } //check if the user has entered a background image
  for(var pixel of fgimage.values()){
    var x = pixel.getX(); //<- x cordinate of the pixel
    var y = pixel.getY(); //<- y cordinate of the pixel
    var threshold = pixel.getRed() + pixel.getBlue(); // the threshold 
    if (pixel.getGreen() > threshold){
      var bgpixel = bgimage.getPixel(x, y);
      output.setPixel(x, y, bgpixel);
    } //setting the pixels with (green > threshold) to the same pixel in the background image (via the cordinates) and storing them in the blank image 'output'
    else{
      output.setPixel(x, y, pixel);
    } // else the pixel from the foreground image gets stored in the blank image 'output'
  } // iterating over the pixels in the forground image
  output.drawTo(cnvs) //printing the new image to the left...
  output.drawTo(cnvs2); //...and the right canvases 
} //this is the greenscreen function
              
            
!
999px

Console