Getting the dimensions of an image element

[SWEngineer]

I have a view file, "show.html.erb", and a Javascript file,
"coordinate.js".

In coordinate.js" I have methods to calculate the width and height of an
image.

How can I call those methods on the "Canvas" in my view.

And, below you can find the scripts of the two files:

* show.html.erb

<%= javascript_include_tag "coordinate" %>
<canvas id="draw"  height= "512" width="512">
</canvas>
<p id="notice"><%= notice %></p>
<p>
<b> Name </b>
<%= @dicom.name %>
</p>
<p>
<b> Image </b>
</p>
<div id="image_element" style="display: none;">
<p>
<%= image_tag @dicom.photo.url , :id => 'dicom_image' %>
</p>
</div>
<%= update_page_tag do |page|
page << "drawImg();"
end
%>
<%= update_page_tag do |page|
page << "drawLine();"
end
%>
<%= link_to 'Edit', edit_dicom_path(@dicom) %>
<%= link_to 'Back', dicoms_path %>

* coordinate.js

function getWidth() {
  var image = document.getElementById("dicom_image");
  imageWidth = image.width;
  return imageWidth;
  //alert("Image Width is " + image.width);
}

function getHeight(){
  var image = document.getElementById("dicom_image");
  imageHeight = image.height;
  return imageHeight;
  //alert("Image Height is " + image.height);
}

function imageWidthAndHeight()
{
  getWidth();
  getHeight();
}

function getTopLeftCoordinate() {
  x=document.getElementById('dicom_image').offsetLeft
  y=document.getElementById('dicom_image').offsetTop
  alert(x);
  alert(y);
}

function getLeftCoordinate() {
  left=document.getElementById('dicom_image').offsetLeft
  return left;
}

function getTopCoordinate() {
  top= document.getElementById('dicom_image').offsetTop
  return top;
}

function drawImg(){
  var canvas = document.getElementById("draw");
  var context = canvas.getContext("2d");
  var image = document.getElementById("dicom_image");
  // render the image to the canvas., an then specify the coordinates
  //(x,y) that specify where the image will be located at the canvas
  context.drawImage(image, 0, 0);
}

function drawLine(){
  var canvas = document.getElementById('draw');
  var context = canvas.getContext('2d');
  context.beginPath();
  context.moveTo(getLeftCoordinate(), getTopCoordinate());
  context.lineTo(100, 200);
  context.strokeStyle = "#FFF"
  context.stroke();
}

Thanks.

[SWEngineer]

Since I'm using Paperclip, I will ask as follows:

I have the following in my model and view. What should I place instead of ????? in the view (show.html.erb)?

*Model:

class Dicom < ActiveRecord::Base
	has_attached_file :photo, :styles => {:original => ["100%", :jpg]}
	
	def getHeight()
		uploaded_file = photo.queued_for_write[:original]
		dimensions = Paperclip::Geometry.from_file(uploaded_file)
		height = dimensions.height
		return height
	end
	
	def getWidth()
		uploaded_file = photo.queued_for_write[:original]
		dimensions = Paperclip::Geometry.from_file(uploaded_file)
		width = dimensions.width
		return width
		end
	end

* View:

<%= javascript_include_tag "coordinate" %>
<canvas id="draw"  height= "<%=????? %>" width="<%=????? %>" >
</canvas>
<p id="notice"><%= notice %></p>
<p>
<b> Name </b>
<%= @dicom.name %>
</p>
<p>
<b> Image </b>
</p>
<div id="image_element" style="display: none;">
<p>
<%= image_tag @dicom.photo.url , :id => 'dicom_image' %>
</p>
</div>
<%= update_page_tag do |page|
page << "drawImg();"
end
%>
<%= update_page_tag do |page|
page << "drawLine();"
end
%>
<%= link_to 'Edit', edit_dicom_path(@dicom) %> 
<%= link_to 'Back', dicoms_path %>

Thanks.